如何为水平滚动条使用scrollbar-gutter属性以避免布局偏移？

我太懂这种布局跳来跳去的烦躁感了！不幸的是，你遇到的是scrollbar-gutter属性的一个当前局限：它在CSS规范里只针对垂直滚动条生效——对水平方向的滚动条完全不起作用，这也难怪你会觉得规范作者好像把水平滚动条给忘了😅。

不过别担心，我们可以用几个变通方案来实现你要的效果：让容器始终预留水平滚动条的空间，彻底避免内容布局偏移。

核心问题说明 #

scrollbar-gutter的设计初衷是为垂直滚动条预留固定的 gutter 空间（毕竟绝大多数网页的主要滚动方向是垂直的），目前的规范和浏览器实现都没有支持水平方向的场景。所以我们只能手动为水平滚动条预留空间。

解决方案1：为容器手动预留滚动条高度空间 #

针对你第一个左右容器高度对齐的场景，我们可以通过padding-bottom或者固定容器高度的方式，提前把水平滚动条的空间算进去。这样不管滚动条是否出现，容器的总高度都保持一致。

修改后的完整代码 #

<div class="wrapper">
  <!-- 短内容版本 -->
  <div class="container">
    <div class="content">
      <div class="item">Left - Without</div>
    </div>
  </div>
  <!-- 长内容版本 -->
  <div class="container">
    <div class="content">
      <div class="item">With Gutter</div>
      <div class="item">Item 2</div>
      <div class="item">Item 3</div>
      <div class="item">Item 4</div>
      <div class="item">Item 5</div>
      <div class="item">Item 6</div>
    </div>
  </div>
</div>

<style>
.wrapper {
  display: flex;
  gap: 50px; /* Space between the two examples */
}
.container {
  width: 200px;
  max-height: 320px; /* 原内容高度300px + 20px滚动条预留空间（留余量） */
  overflow-x: auto; /* Horizontal scrollbar, only when necessary */
  overflow-y: hidden; /* Disable vertical scrollbar */
  box-sizing: border-box;
  padding-bottom: 16px; /* 预留标准滚动条高度的空间 */
}
.content {
  display: flex;
  height: 300px; /* 固定内容区高度，确保左右容器高度统一 */
}
.item {
  min-width: 100px;
  padding: 20px;
  background-color: lightgrey;
  margin-right: 10px;
}
</style>

关键修改点 #

• 给.container添加padding-bottom: 16px（标准滚动条高度，不同浏览器可能略有差异，可根据实际调整），提前预留滚动条的位置
• 用box-sizing: border-box确保容器的总高度包含padding，避免整体尺寸意外变大
• 固定.content的高度为300px，让两个容器的内容区高度完全对齐

解决方案2：hover显示滚动条时避免下方内容偏移 #

针对你第二个hover显示水平滚动条的场景，同样用预留空间的思路，让容器始终占据包含滚动条的高度，这样滚动条出现时不会挤压下方的文字。

修改后的完整代码 #

<div class="container">
  <div class="content">
    <div class="item">Hover me</div>
    <div class="item">Hover me</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
    <div class="item">Item 6</div>
    <div class="item">Item 7</div>
    <div class="item">Item 8</div>
  </div>
</div>
<p>This text should NOT be shifted down by the horizontal scrollbar when it appears</p>

<style>
.container {
  width: 100%;
  height: 316px; /* 300px内容高度 + 16px滚动条空间 */
  overflow-x: hidden; /* Initially hide the horizontal scrollbar */
  overflow-y: hidden; /* Disable vertical scrollbar */
  box-sizing: border-box;
  padding-bottom: 16px; /* 预留滚动条空间 */
  transition: overflow-x 0.3s ease-in-out; /* Smooth transition for overflow change */
}
.container:hover {
  overflow-x: auto; /* Show the horizontal scrollbar on hover */
}
.content {
  display: flex;
  height: 300px; /* 固定内容区高度 */
}
.item {
  min-width: 150px;
  padding: 20px;
  background-color: lightgrey;
  margin-right: 10px;
}
</style>

效果说明 #

容器始终保持316px的高度，滚动条会出现在预留的padding-bottom空间里，hover时滚动条显示，但容器总高度不变，下方的文字完全不会被下移。

额外小技巧 #

如果想让滚动条样式更统一，还可以用CSS自定义滚动条样式，同时预留对应的空间：

/* 自定义水平滚动条样式 */
.container::-webkit-scrollbar {
  height: 16px; /* 和预留的padding-bottom高度一致 */
}
.container::-webkit-scrollbar-track {
  background: #f1f1f1;
}
.container::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 8px;
}

内容来源于stack exchange