已隐藏滚动条但仍占用空间，如何消除其默认占位？

问题说明 #

滚动条已成功隐藏，但仍会占用空间，需要消除这部分预留的空白区域。

原始代码 #

.outer {
  width: 100px;
  overflow: hidden;
  background: #999;
}

.scrollable {
  white-space: nowrap;
  overflow-x: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scrollable::-webkit-scrollbar {
  overflow-x: scroll;
}

<div class="outer">
  <div class="scrollable">this is scrollable...</div>
</div>

问题根源 #

1. WebKit内核浏览器的滚动条样式规则错误：.scrollable::-webkit-scrollbar里设置overflow-x: scroll;完全无效，无法真正隐藏滚动条。
2. 即使正确隐藏滚动条，部分浏览器仍会默认预留滚动条的显示空间。

解决方案 #

步骤1：修正滚动条隐藏样式

把WebKit的滚动条样式改为display: none;，确保所有浏览器都能真正隐藏滚动条：

.scrollable::-webkit-scrollbar {
  display: none; /* Chrome、Safari、Opera 生效 */
}

步骤2：消除预留空间

通过调整内边距+外边距，让容器的overflow: hidden切掉滚动条的预留空间，同时保证内容不被裁剪：

.scrollable {
  white-space: nowrap;
  overflow-x: scroll;
  -ms-overflow-style: none; /* IE、Edge 生效 */
  scrollbar-width: none; /* Firefox 生效 */
  margin-bottom: -10px; /* 抵消滚动条的高度 */
  padding-bottom: 10px; /* 防止内容被容器裁剪 */
}

完整修改后代码 #

.outer {
  width: 100px;
  overflow: hidden;
  background: #999;
}

.scrollable {
  white-space: nowrap;
  overflow-x: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
  margin-bottom: -10px;
  padding-bottom: 10px;
}

.scrollable::-webkit-scrollbar {
  display: none;
}

<div class="outer">
  <div class="scrollable">this is scrollable... this is scrollable... this is scrollable...</div>
</div>

原理说明 #

• margin-bottom: -10px 抵消了浏览器为滚动条预留的垂直空间，让元素实际高度超出容器。
• padding-bottom: 10px 保证元素内的内容不会因为负外边距被容器的overflow: hidden裁剪。
• 各浏览器的滚动条隐藏属性确保滚动条本身不可见。

内容的提问来源于stack exchange，提问作者Ian Davis