滚动条的HTML保留空间

Question

我有一个div可能会在添加或删除内容时溢出.

然而,UI设计者不希望看到但不活动的滚动条(与之一样overflow: scroll),并且他们不希望在添加和删除内容布局时更改内容布局(如同overflow: auto).

是否有办法获得此行为,并考虑不同平台和浏览器上的不同滚动条.

https://jsfiddle.net/qy9a2r00/1/

Answer 1

目前还没有浏览器支持此属性（2021 年），但滚动条装订线是建议的解决方案。

更新：2022 - 除 Safari 之外的所有现代浏览器都支持该属性。

Answer 2

做到这一点的唯一方法是使容器中的项目的宽度固定。并且您必须对滚动条的宽度保持保守。

   .container { 
       width: 200px;
       height: 200px;
       overflow: auto;
       overflow-x: hidden;
       border: 1px solid black;
   }
   .item {
       width: 200px;
...

https://jsfiddle.net/fr1jnmn6/1/