纯css实现水平方向分屏和垂直方向分屏

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

一、水平分屏

<div class="demo">
    <div class="left">
        <div>000</div>
    </div>
    <div class="right">right</div>
</div>

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里面的内容没有显示了。而且滚动条样式有问题

我们需要的是如下效果：

于是我们需要对上述代码做些许改动：

<div class="demo">
    <div class="demo-left">
        <div class="left"></div>
        <div class="left-content">left</div>
    </div>
    <div class="right">right</div>
</div>

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：用户可调整元素的高度