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

作者：IT小白 | 2024-02-16 22:48:15

踩

chrome垂直分屏

最近开发有这样一个需求，水平/垂直方向上的能够拖动。最开始采用操作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;

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/97443