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;

}

.right{

background: #f0f;

margin-left: 10px;

flex: 1

}

复制代码

上面有个问题，left里面的内容没有显示了。而且滚动条样式有问题

我们需要的是如下效果：

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

left

right

复制代码

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

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

html如何做滑动门效果,纯css实现滑动特效(滑动门)
[实例简介] [实例截图] [核心代码] 无标题文档 *{margin:0;padding:0;} img{border:none;} .dabox{ width:1236px; height:350 ...
html css 水平时间轴,纯css+js水平时间轴
自定义,并自动加载时间节点当前时间节点居中,突出显示时间动态无痕添加效果图: 初始状态时间左走到一定2016.1月后 html: + - 对应 JS 设置处理: var left = docu ...
css玻璃雨滴效果,纯css实现窗户玻璃雨滴逼真效果_javascript技巧
写样式,毕竟每个雨滴都长得不一致嘛.使用预处理器除了可以帮助我们减少工作量之外,还可以使用预处理器中的循环.变量等.最主要的是可以使用随机函数产生的随机值,让我们不需要单独处理上百个雨滴. 有关于HA ...
css玻璃雨滴效果,纯css实现窗户玻璃雨滴逼真效果
css实现窗户上水珠效果,效果特别逼真,窗外的雨淅淅沥沥飘打在玻璃上,看起来很像模糊的窗外,斜滴的雨露,接下来给大家一起来用CSS技术实现这样一幅画面,下面这里仅是用CSS技术来演示这样的一个场景, ...
html怎么做响应式表格,纯CSS实现响应式表格
自从转岗至腾讯云后,项目中接触到大量的数据表格.多列数据表格在空间有限的手机屏幕下,难以完美呈现,需要做响应式处理.本文介绍一种使用纯CSS实现响应式表格的方法. 通常表格中的一行代表一条项目,每列代 ...
如何在html中加入动画效果,纯css如何实现按钮的水滴动画效果？
纯css如何实现按钮的水滴动画效果?下面本篇文章就来给大家介绍一下使用纯css实现Material Design中按钮的水滴动画效果.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. ...
怎么用java做水滴动画_‘纯css实现Material Design中的水滴动画按钮’的js体验优化...
前言在上一篇,我们已经实现了用纯css实现水滴扩散动画,但是有一些瑕疵,文章结尾处也提到过,一是页面加载进来就会看到按钮上的水滴动画运动一次,二是点击的时候不能根据鼠标的位置来扩散,今天我们来解决这 ...
html导航凹凸效果,纯CSS实现底部弧度效果（凹凸圆弧）
相信大家再开中中都遇到过底部边为圆弧(凹凸圆弧),其它三边都正常的情况,这种图之前我都会采用图片去搞,但是身为一名开发人员(算是程序员了),应该从便曾的角度去解决问题,所以今天分享下纯css实现底部弧 ...
android 音符动画效果,纯css实现音符跳动效果
效果如图: image.png 代码: 纯css实现音符跳动效果 .voice { display: flex; align-items: flex-end; justify-content: cen ...

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

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

最新文章

热门文章