在网页布局中，滚动条的出现与消失常常导致页面内容的“跳动”。当内容高度超过容器时，滚动条会占据一定宽度，使得内容区域变窄；而当内容减少不再需要滚动条时，布局又瞬间回弹。这种视觉上的不稳定性严重影响了用户体验，尤其是在内容动态加载、弹窗打开或响应式切换时。

CSS 新属性 scrollbar-gutter 正是为解决这一问题而生。它允许开发者为滚动条预留固定空间，彻底杜绝布局跳动。

scrollbar-gutter 是 CSS 中用于控制滚动条预留空间的属性。通过 stable 或 both-edges 取值，开发者可以预先为滚动条留出宽度，确保内容变化时布局始终保持稳定。

本文深入讲解其语法、工作原理、浏览器支持、实际应用场景及最佳实践，并附有可直接运行的代码示例。

一、基本概念

scrollbar-gutter became Baseline Newly available in December 2024.

scrollbar-gutter 是 CSS 中的一个较新属性，它定义了浏览器是否为滚动条保留固定的空间，即使当前内容未溢出。它的核心价值在于防止因滚动条出现或消失而导致的布局偏移。

在传统布局中，当一个可滚动容器（overflow: auto）的内容高度从小于容器高度变为大于容器高度时，滚动条会突然出现，并占据约 15px 到 17px 的宽度，导致容器内可用宽度减少，内部元素可能发生换行或位置偏移。scrollbar-gutter 通过预留空间，使滚动条始终占用一个“虚拟槽位”，从而消除这种跳动。

二、语法与取值

scrollbar-gutter: auto | stable | both-edges;

三、工作原理

当设置 scrollbar-gutter: stable 时，浏览器会执行以下操作：

1. 查询系统滚动条宽度（通常由操作系统和浏览器决定，可通过 scrollbar-width 属性间接影响）。

2. 在容器的内边距外侧（或内容区域外侧）预留一块宽度等于滚动条宽度的空白区域。

3. 当内容未溢出时，该区域显示为空白，但容器内容宽度已减去该预留宽度。

4. 当内容溢出时，滚动条直接出现在这个预留位置上，内容宽度保持不变。

这一机制确保了滚动条无论是否可见，容器的内容框宽度都是固定的。

四、浏览器支持情况

截至 2026 年 3 月，scrollbar-gutter 已获得主流浏览器稳定支持。

在旧版本浏览器中，该属性会被忽略，可结合 @supports 提供降级方案。

建议访问 Can I Use 网站，及时了解 scrollbar-gutter 属性在各类浏览器中的最新兼容性情况。

五、实际应用场景

1. 防止动态内容加载时的布局跳动

单页应用中，常见点击“加载更多”后内容增多出现滚动条，导致页面抖动。使用 scrollbar-gutter: stable 可让滚动条始终占据空间，内容保持稳定。

2. 响应式布局中的宽度一致性

在响应式设计中，不同断点下容器高度可能变化，滚动条时有时无。预留滚动条空间可以保证容器宽度在所有断点下一致，避免因宽度变化触发布局重排。

3. 固定宽度的卡片或弹窗

弹窗内容可能较少或较多，若滚动条突然出现，可能挤压内部按钮或文字。预先留出空间可确保弹窗宽度固定，内部元素位置不变。

4. 双边滚动条的特殊布局

某些布局需要同时考虑从左到右和从右到左的滚动条方向（如使用 direction: rtl 的页面），使用 both-edges 可在两侧同时预留空间，确保无论滚动条出现在哪一侧，布局都不受影响。

六、代码示例

1. 基础用法

.card {
  scrollbar-gutter: stable;
  height: 200px;
  overflow-y: auto;
  border: 1px solid #ccc;
}

2. 对比示例：动态添加内容，观察布局变化

以下示例包含两个容器，一个未使用 scrollbar-gutter，另一个使用了 stable。点击按钮添加大量内容，观察容器宽度是否变化。

/* 部分 CSS 代码 */
.container {
  width: 100%;
  height: 200px;
  border: 2px solid #333;
  overflow-y: auto;
  margin-top: 0.5rem;
  background: #f9f9f9;
}
.with-gutter {
  scrollbar-gutter: stable;
}

<!-- 部分 HTML 代码 -->
<div class="demo">
  <h3>使用 scrollbar-gutter: stable</h3>
  <div class="info">内容宽度始终保持不变</div>
  <button onclick="addContent(this, 'gutter')">添加内容</button>
  <div id="gutter" class="container with-gutter">
    <div class="content">
      <p>初始内容</p>
    </div>
  </div>
</div>

3. both-edges 示例

在需要同时预留两侧空间的场景（例如居中固定宽度的对话框），可设置 scrollbar-gutter: both-edges：

.dialog {
  scrollbar-gutter: both-edges;
  overflow-y: auto;
  width: 400px;
  height: 300px;
}

此时无论滚动条出现在左侧还是右侧（取决于语言方向），容器内容区宽度始终固定为 400px - 2 * 滚动条宽度，确保内部元素位置对称。

七、与其他 CSS 属性的配合

• overflow：scrollbar-gutter 仅在 overflow 为 auto 或 scroll 时生效。若 overflow 为 hidden，滚动条永不出现，预留空间也不会显示。

• scrollbar-width：可设置滚动条宽度为 auto 或 thin，影响 scrollbar-gutter 预留的宽度。例如设置 scrollbar-width: thin 后，预留空间会相应减小。

• padding：预留空间位于内边距外侧，因此 padding 区域不受滚动条影响。若需要滚动条与内容之间留白，应使用 padding。

• box-sizing：当容器使用 box-sizing: border-box 时，width 包含边框和内边距，但不包含滚动条预留空间（滚动条占据的是额外的外部空间）。开发者需注意内容宽度的计算。

八、最佳实践

• 优先在内容动态变化的容器上使用：如评论列表、聊天窗口、折叠面板等。

• 测试不同浏览器的滚动条宽度：不同操作系统下滚动条宽度可能有差异，预留空间会自动适应，无需手动设置。

• 结合 scrollbar-width 优化视觉效果：在 Windows 等滚动条较宽的系统上，可考虑使用 scrollbar-width: thin 减小预留空间，提升空间利用率。

• 考虑 RTL 布局：若网站支持从右到左的阅读模式，使用 both-edges 可避免滚动条方向变化导致的布局偏移。

• 渐进增强：使用 @supports (scrollbar-gutter: stable) 为现代浏览器提供增强体验，同时确保旧浏览器基础功能可用。

总结

scrollbar-gutter 是一个精巧而实用的 CSS 属性，它通过为滚动条预留固定空间，从根本上解决了长期困扰开发者的“滚动条跳动”问题。无论是动态加载内容、响应式切换还是复杂布局，该属性都能显著提升用户体验和界面稳定性。

随着浏览器支持的日益完善，scrollbar-gutter 应成为每位前端开发者工具箱中的常规工具，在需要稳定布局的地方大胆使用，让用户告别烦人的界面抖动。

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://fly63.com/article/detial/13621