Question

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

然而，UI设计师不希望显示可见但不活跃的滚动条（与overflow: scroll一样），并且他们不希望在添加和删除内容布局时更改内容布局（与{{一样） 1}}）。

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

Answer 1

执行此操作的唯一方法是固定容器中项目的宽度。而且你必须保守滚动条的宽度。

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

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

Answer 2

人们无法知道滚动条有多厚，仅使用HTML＆amp; CSS因此不知道（蓝色）占位符的width。

您可以使用脚本来解决此类任务。强制隐藏容器中的滚动条并测量内部和外部宽度。不同之处在于滚动条宽度。将此宽度（例如，CSS）设置为占位符元素。每当显示滚动条时，在棘手的部分隐藏此元素。

这个问题的常用解决方案是你不想要的。

Answer 3

overflow-y:overlay 将是对此的部分解决方案，因为它解决了在添加或删除滚动条时不希望内容布局发生变化的问题。可以添加额外的填充或边距，以便滚动条不会混淆后面的 div

这是同一个 https://jsfiddle.net/kitwradr/2qcsj6hw/

的 jsfiddle

Answer 4

您需要有一个固定宽度（最终总宽度）的父 div 和一个宽度小 16px 的子 div。然后滚动条将在父 div 中有 16px 的空闲空间。

宽度应该总是一个数字（不能是相对值）。在子 div 中，您还需要使用一个数字。你不能计算（100%-16px）。

<div className="user-list">
  <div className="user-list__content">
    {content}
  </div>    
</div>

.user-list {
  width: 500px;  /* total width */
  height: 1000x;
  overflow-y: auto;
}

.user-list__content {
  width: 484px;  /* must be 16px smaller */
  height: 100%;
}

Answer 5

尚无浏览器支持此属性（2021 年），但 scrollbar-gutter 是对此的建议解决方案。

Answer 6

也许append底部的div会让你的问题变得柔和吗？

https://jsfiddle.net/moongod101/k7w574mw/1/

滚动条的HTML保留空间

6 个答案: