纯CSS实现左右拖拽改变布局大小使用CSS3中resize属性水平,垂直拖动元素,改变大小

利用浏览器非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实现左右拖拽改变布局大小使用CSS3中resize属性水平,垂直拖动元素,改变大小相关推荐

vue拖动改变模板_可视化拖拽 UI 布局之拖拽篇
前言:前段时间负责公司的运营管理后台项目,通过运营后台的PC端拖拽配置布局,达到App首页模板的动态UI界面配置,生成页面.趁着周末,整理一下当时所了解到的拖拽.文章会根据大家的反馈或者自己学习经验的 ...
可视化拖拽 UI 布局之拖拽篇
前言:前段时间负责公司的运营管理后台项目,通过运营后台的PC端拖拽配置布局,达到App首页模板的动态UI界面配置,生成页面.趁着周末,整理一下当时所了解到的拖拽.文章会根据大家的反馈或者自己学习经验的 ...
13.鼠标拖拽：案例:鼠标拖拽小方块，小方格跟着移动（桌面图标拖动）
目录一:案例鼠标拖拽小方块,小方格跟着移动(桌面图标拖动) 二:取消拖拽文字的行为 1.没取消前: 2.取消后: 三:鼠标拖拽案例优化: 如果有好多个小盒子要做拖拽,一个一个加上面的1,2,3步太麻 ...
css纵向滚动条自适应,纯css实现完美决对居中自动滚动条根据内容宽度、高度自适应,垂直水平居中,自动出现滚动条。.doc...
纯css实现完美决对居中自动滚动条根据内容宽度.高度自适应,垂直水平居中,自动出现滚动条..doc 还剩 3页未读, 继续阅读下载文档到电脑,马上远离加班熬夜! 亲,喜欢就下载吧,价低环保! 内 ...
浅谈CSS3中display属性的Flex布局，关于登陆页面属性框的设置
声明:本文转发自三里屯柯南的浅谈CSS3中display属性的Flex布局http://www.cnblogs.com/xuyuntao/articles/6391728.html 基本概念采用Fl ...
html左右分隔可调整,CSS实现可拖拽分割面板
项目中经常会用到左右分栏布局方式,一般情况左侧面板大小都是固定的,但是有时会有需求做成拖拽式的,能够自由拖拽调整面板大小.(作为当年的资深Java Swing开发人员,对于JSplitPane印象深刻 ...
鼠标拖拽---自定义布局（电影院）
鼠标拖拽点击-电影院自定义布局标签鼠标拖拽.自定义布局效果自定义布局-电影院目的疫情期间,电影院都是隔空而坐,想用html.css.js.jq做个简单的自定义布局. 介绍自定义布局中有银 ...
html 实现格子效果图,纯CSS实现动态图片的九宫格布局
起因最近碰到这样一个需求,要实现一个"九宫格图片"展示,设计师给过来的稿子是酱的是的,九宫格对应的是九种样式. 天不怕,地不怕,就怕设计有想法. 当一看到这样的需求,很多人的第 ...
js（event、拖拽、碰撞检测、缓冲运动、多属性运动、轮播图、Object、正则、闭包、ajax）
事件对象概念:当时事件发生的时候,所以跟事件相关的信息(事件类型,事件目标,鼠标位置等)都会存储在事件对象event中. 获取方式: console.log(event); //ie chrome ...

纯CSS实现左右拖拽改变布局大小使用CSS3中resize属性水平,垂直拖动元素,改变大小

纯CSS实现左右拖拽改变布局大小使用CSS3中resize属性水平,垂直拖动元素,改变大小相关推荐

最新文章

热门文章

纯CSS实现左右拖拽改变布局大小 使用CSS3中resize属性 水平,垂直拖动元素,改变大小

纯CSS实现左右拖拽改变布局大小 使用CSS3中resize属性 水平,垂直拖动元素,改变大小相关推荐

最新文章

热门文章

纯CSS实现左右拖拽改变布局大小使用CSS3中resize属性水平,垂直拖动元素,改变大小

纯CSS实现左右拖拽改变布局大小使用CSS3中resize属性水平,垂直拖动元素,改变大小相关推荐