前端界面布局中,滚动条是我们必不可少的东西,当我们容器不足以呈下所有内容时,需要滚动条来支撑我们查看完整的数据。
当然了,简单的属性我们就不介绍了,想必大家都很了解和熟悉,我们来看个特殊的属性。
场景一:定宽高的容器,不足以放下所有内容时就需要滚动条来进行扩展查看
场景二:初始时容器足够放下所有内容,但是点击展开后内容过多无法呈现的情况(例如表格的扩展)
这时我们会采取文本溢出呈现滚动条的情况(如纵向的滚动条:overflow-y:auto),但是滚动条出现后会挤压宽度,毕竟它自己占一部分宽度,这就会导致我们原先布局好的界面受到影响
多次重复点击展开项,收回展开项,最终会导致其余地方会越挤越小,最终导致界面无法查看。
谷歌推出了针对此问题的解决方案,对于overflow增加了新的属性 " overlay ",此属性的作用会让滚动条变的类似于移动端那种悬浮滚动条,这样就会避免占据空间导致内容区域变形。
但是,,,此属性其他浏览器目前还不支持,据说后期都会兼容支持。
在这里插入图片描述 在这里插入图片描述
如果不考虑兼容性,可以使用这个属性,存在即合理,想必以后也会慢慢兼容支持。或者可以考虑写兼容性写法,比如支持的浏览器用这个属性,不支持的浏览器用另一个属性(如scoroll、auto)等。
好了,希望对你有所帮助。
如有问题,请指出,接受批评。
网友评论