美文网首页
“浮空“滚动条

“浮空“滚动条

作者: 坏丶毛病 | 来源:发表于2020-12-28 09:53 被阅读0次

前端界面布局中,滚动条是我们必不可少的东西,当我们容器不足以呈下所有内容时,需要滚动条来支撑我们查看完整的数据。

当然了,简单的属性我们就不介绍了,想必大家都很了解和熟悉,我们来看个特殊的属性。

场景一:定宽高的容器,不足以放下所有内容时就需要滚动条来进行扩展查看

场景二:初始时容器足够放下所有内容,但是点击展开后内容过多无法呈现的情况(例如表格的扩展)

这时我们会采取文本溢出呈现滚动条的情况(如纵向的滚动条:overflow-y:auto),但是滚动条出现后会挤压宽度,毕竟它自己占一部分宽度,这就会导致我们原先布局好的界面受到影响

多次重复点击展开项,收回展开项,最终会导致其余地方会越挤越小,最终导致界面无法查看。

谷歌推出了针对此问题的解决方案,对于overflow增加了新的属性 " overlay ",此属性的作用会让滚动条变的类似于移动端那种悬浮滚动条,这样就会避免占据空间导致内容区域变形。

但是,,,此属性其他浏览器目前还不支持,据说后期都会兼容支持。


在这里插入图片描述 在这里插入图片描述

如果不考虑兼容性,可以使用这个属性,存在即合理,想必以后也会慢慢兼容支持。或者可以考虑写兼容性写法,比如支持的浏览器用这个属性,不支持的浏览器用另一个属性(如scoroll、auto)等。

好了,希望对你有所帮助。

如有问题,请指出,接受批评。

相关文章

  • “浮空“滚动条

    前端界面布局中,滚动条是我们必不可少的东西,当我们容器不足以呈下所有内容时,需要滚动条来支撑我们查看完整的数据。 ...

  • 浮空城

    我有两个很是要好的朋友,小芬和小雅,两人一同在一个城市读书,工作。曾经在闲聊的时候,问过她们一个很俗套的问题,你们...

  • 夏日浮空

    别担心,你丢掉的玉米都是坏的。 不知不觉,已经走了好远。上周从工作中偷溜出来,返程的路上坐在公交车上,...

  • 2021-03-13

    小王子出生在浮空岛。浮空岛飘浮在天上,就像荷叶漂在湖水中。浮空岛禁止小孩子去探查岛的边界,有守望者看护着边界。如果...

  • 商品展示特效

    一、水平滚动条 和 垂直滚动条 1.1 核心技术点1)求滚动条的长度? 2)拖动滚动条,求内容要走多少?滚动条的长...

  • js特效-2

    一,水平滚动条和垂直滚动条 1.1技术点 1)求滚动条的长度 2)拖动滚动条,求内容要走多少 ~滚动条的长度取决于...

  • 浮空 | 琐碎文

    如果总是在漆黑的地方奔跑,那只能看脚下,而看不清眼前。 ​​​ 语言上的推辞+行为上的想要=小孩单纯是为了追求;成...

  • 浮空若梦

    夜来听窗风戏雨,十年不见我和你。不知天涯何方处,落泪湿襟悔心意。

  • 【沁园春】瑞雪浮空

    图片源自于网络 冬日青云,长天寒风,旷野繁星。看西晖流水,牛羊绰绰,平沙落雁,车马腾腾。瑞雪浮空,浓霜拂地,万类人...

  • css3的-webkit-scrollbar滚动条特性

    css3 新增的滚动条样式,美化浏览器自带的滚动条 滚动条组成 ::-webkit-scrollbar 滚动条整体...

网友评论

      本文标题:“浮空“滚动条

      本文链接:https://www.haomeiwen.com/subject/tpkngktx.html