纯CSS实现左右拖拽改变布局大小
2020-06-20 11:47
781 查看
利用浏览器非overflow:auto
元素设置resize
可以拉伸的特性实现无JavaScript的分栏宽度控制。
webkit浏览器下滚动条可以自定义,其中resize区域大小就是scrollbar的大小,于是,我们可以将整个拉伸区域变成和容器一样高。
实现原理
CSS中有一个resize
属性,如果一个元素的overflow
属性值不是visible
,则通过设置resize
属性可以拉伸这个元素尺寸。
但是,这种拉伸却有一个问题,那就是拖拽的区域太小了,就右下角那么一丢丢地方:
那有什么办法可以把这个拖拽区域变大呢?
后来经过我的研究发现,resize属性的拖拽bar和滚动条的拖拽bar是一个体系里面的东西,只需要对滚动条进行自定义,就能间接设置resize bar的尺寸。
例如:
.resize-bar::-webkit-scrollbar { width: 200px; height: 200px; }
此时,拉伸区域就很大了:
接下来做的事情就是把这个拖拽区域藏在某一栏布局的后面,然后透出部分宽度可以用来拖拽,如下图所示:
最后,我们的左右分栏采用自适应布局就能实现我们想要的效果。
您可以狠狠地点击这里:纯CSS实现分栏宽度拉伸demo
代码如下:
.column { overflow: hidden; } .column-left { height: 400px; background-color: #fff; position: relative; float: left; } .column-right { height: 400px; padding: 16px; background-color: #eee; box-sizing: border-box; overflow: hidden; } .resize-save { position: absolute; top: 0; right: 5px; bottom: 0; left: 0; padding: 16px; overflow-x: hidden; } .resize-bar { width: 200px; height: inherit; resize: horizontal; cursor: ew-resize; opacity: 0; overflow: scroll; } /* 拖拽线 */ .resize-line { position: absolute; right: 0; top: 0; bottom: 0; border-right: 2px solid #eee; border-left: 1px solid #bbb; pointer-events: none; } .resize-bar:hover ~ .resize-line, .resize-bar:active ~ .resize-line { border-left: 1px dashed skyblue; } .resize-bar::-webkit-scrollbar { width: 200px; height: inherit; } /* Firefox只有下面一小块区域可以拉伸 */ @supports (-moz-user-select: none) { .resize-bar:hover ~ .resize-line, .resize-bar:active ~ .resize-line { border-left: 1px solid #bbb; } .resize-bar:hover ~ .resize-line::after, .resize-bar:active ~ .resize-line::after { content: ''; position: absolute; width: 16px; height: 16px; bottom: 0; right: -8px; background: url(./resize.svg); background-size: 100% 100%; } }
<div class="column"> <div class="column-left"> <div class="resize-bar"></div> <div class="resize-line"></div> <div class="resize-save"> 左侧的内容,左侧的内容,左侧的内容,左侧的内容 </div> </div> <div class="column-right"> 右侧的内容,右侧的内容,右侧的内容,右侧的内容 </div> </div>
利用浏览器非overflow:auto
元素设置resize
可以拉伸的特性实现无JavaScript的分栏宽度控制。
webkit浏览器下滚动条可以自定义,其中resize区域大小就是scrollbar的大小,于是,我们可以将整个拉伸区域变成和容器一样高。
到此这篇关于纯CSS实现左右拖拽改变布局大小的文章就介绍到这了,更多相关CSS左右拖拽改变布局大小内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
相关文章推荐
- js拖拽之二:实现拖动元素上下左右改变元素大小
- JQuery拖拽元素改变大小尺寸实现代码
- QT 实现可以拖拽边框改变大小的QGraphicsItem矩形
- 如何重写PictureBox的OnPaint方法绘制矩形,并实现拖动改变矩形大小,鼠标悬停时提示拖拽方向(二)
- Jqurey实现类似EasyUI的页面布局可改变左右的宽度
- CSS 布局实例系列(三)如何实现一个左右宽度固定,中间自适应的三列布局——也聊聊双飞翼
- JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
- css实现三列布局,左右固定值,中间自适应。
- css左右布局的几种实现方式和优缺点
- CSS实现左右栏宽度固定中间栏宽度变化且各栏高度自适应背景色不同的三栏布局
- 前端经典面试题之CSS实现三栏布局,左右宽度固定,中间宽度自适应
- 利用JavaScript实现拖拽改变元素大小
- CSS布局1:用三个div实现左右两列固定,中间自适应
- JQuery拖拽元素改变大小尺寸实现代码
- 原生静态布局下,用div+css实现界面随着不同的屏幕变换自动调整大小
- 使用HTML+CSS实现如图布局,border-width:5px,格子大小是50px*50px,hover时 边框变成红色,需要考虑语义化。
- BCB中实现拖拽Panel 改变位置和大小的代码
- jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
- 独创轻松实现拖拽,改变层布局
- JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)