最近开发有这样一个需求，水平/垂直方向上的能够拖动。最开始采用操作dom的方式，但是卡顿现象明显，体验太差。思考问题是不是操作太频繁，导致卡顿，于是又尝试防抖与节流，效果还是不明显。突发想到，css有个resize属性可以实现这个效果。
一、水平分屏
000right
复制代码
css:
.demo{
display:flex;
height:200px;
}
.left{
min-width:200px;
max-width: 1000px;
background: #ccc;
resize:horizontal;
overflow:scroll;
margin-right: 10px;
height:200px;
opacity:1;
}
.left::-webkit-scrollbar {
width: 20px; // 滚动条宽度，我们就是靠拖拽滚动条来实现分屏宽度变化的
height: inherit;
}
.right{
background: #f0f;
margin-left: 10px;
flex: 1
}
复制代码
上面有个问题，left里面的内容没有显示了。而且滚动条样式有问题
我们需要的是如下效果：
于是我们需要对上述代码做些许改动：
leftright
复制代码
css:
.demo{
display:flex;
height:200px;
}
.demo-left{
position: relative;
}
.left{
min-width:200px;
max-width: 1000px;
background: #ccc;
resize:horizontal;
overflow:scroll;
margin-right: 10px;
height:200px;
opacity:0;
position: relative;
z-index: 1;
}
.left-content{
position: absolute;
width: 100%;
height:200px;
background:#0f0;
color:#000;
left: 0;
top:0;
}
.left::-webkit-scrollbar {
width: 20px;
height: inherit;
}
.right{
background: #f0f;
margin-left: 10px;
flex: 1
}
复制代码
上述效果可在codepen上查看
二、垂直方向
原来类似，点此查看
三、resize属性
resize属性是指定一个元素是否可由用户调整大小的。
语法：
resize:none | both | horizontal | vertical
none：用户不可一调整元素的尺寸(默认值)
both:用户可调整元素的高度和宽度
horizontal：用户可调整元素的宽度
vertical：用户可调整元素的高度
