html 怎么做分屏效果,纯css实现水平方向分屏和垂直方向分屏

最近开发有这样一个需求，水平/垂直方向上的能够拖动。最开始采用操作dom的方式，但是卡顿现象明显，体验太差。思考问题是不是操作太频繁，导致卡顿，于是又尝试防抖与节流，效果还是不明显。突发想到，css有个resize属性可以实现这个效果。

一、水平分屏

000

right

复制代码

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;