“浮空“滚动条

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

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

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

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

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

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

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

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

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

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

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

个人微信公众号：