DigitalOcean 为您的旅程每个阶段提供云产品。 立即开始使用 $200 免费积分！
CSS 中的 scrollbar-gutter 属性提供了灵活性来确定浏览器如何显示与屏幕上内容交互的滚动条的空间。 规范将其描述为“为滚动条保留空间”。 这很美妙，因为现在我们可以确保
- 内容不会因是否存在滚动条而发生重排
- 无论用户是否使用“叠加”滚动条，体验都一致。
body {
scrollbar-gutter: stable both-edges;
}我们都在同一个页面上，滚动条通常是浏览器侧面的东西（在规范中正式称为“用户代理” - 或 UA），它指示您的滚动位置相对于网页上可用的总空间。
传统上，它们是一个带有滑动指示器的视觉容器。 这些被称为 **传统滚动条**。 指示器位于间隙内，而间隙在显示时会占用屏幕上的物理空间。
然而，最近滚动条的外观已经朝着更加简约的方向发展。 我们称之为 **叠加滚动条**，它们要么部分透明，要么完全透明，同时位于页面内容之上。 换句话说，与占用屏幕上物理空间的传统滚动条不同，叠加滚动条位于屏幕内容之上。
顺便说一下，滚动条可能会出现在其他地方。 除了紧贴浏览器右侧，我们还会在 HTML 元素上看到滚动条，其中内容溢出元素并且 overflow 属性（或 overflow-x 和 overflow-y）设置为 scroll 值。 请注意，overflow-x 的存在意味着我们除了垂直滚动之外还有水平滚动。
这就是我们所说的。 不是指示器本身，而是包含它的容器。 这就是间隙。 浏览器使用传统滚动条还是叠加滚动条完全取决于 UA 本身。 这不是我们能决定的。 滚动条宽度也是如此。 用户代理定义它，我们无法控制它。
这就是 scrollbar-gutter 发挥作用的地方。 我们可以明确说明间隙是否以其传统和叠加变体存在。
语法
.my-element {
scrollbar-gutter: auto | stable && both-edges?
}双连字符 (&&) 将两个或多个必须出现的组件分隔开，这些组件可以按任何顺序出现。
问号 (?) 表示前面的类型、词语或组是可选的（出现零次或一次）。
值
auto（初始值）：几乎是迄今为止描述的默认行为。 将此属性设置为该值允许传统滚动条在元素的overflow属性设置为scroll或auto的元素上占用 UI 中的空间。 相反，叠加滚动条通过位于元素之上而不会占用任何空间。stable：只要元素的overflow属性设置为scroll或auto，并且我们使用的是传统滚动条，这就会添加一些带有偏见的行为，始终为滚动条间隙保留空间 - 即使盒子没有溢出。 相反，这不会影响叠加滚动条。
规范的工作草案有一个超级方便的表格，将这些定义分解到它们的上下文中，以显示它们与传统和叠加滚动条之间的关系。
| 溢出 | scrollbar-gutter | 溢出 | 没有溢出 |
|---|---|---|---|
| 滚动 | 自动 | 是 | 是 |
| 稳定 | 是 | 是 | |
| 自动 | 自动 | 是 | |
| 稳定 | 是 | 是 | |
| 隐藏 | 自动 | ||
| 稳定 | 是 | 是 | |
| 可见、裁剪 | 自动 | ||
| 稳定 |
“G” 表示为滚动条间隙保留空间的情况，“f？” 表示如果指定了强制则为滚动条间隙保留空间的情况，而空单元格表示没有保留空间的情况。
规范状态
scrollbar-gutter 属性在 溢出模块级别 4 中定义，该模块处于工作草案状态。 这意味着这仍然是一个正在进行的工作，并且在草案从候选推荐移到最终推荐之间可能会发生变化。
溢出模块级别 3 规范也是工作草案，因此这是一个很好的迹象，表明 (1) scrollbar-gutter 需要一段时间才能成为推荐，以及 (2) 它仍然处于开发之中。
浏览器支持
在上次更新时，没有浏览器支持。
相关属性
更多信息
- 使用
scrollbar-gutterCSS 属性防止由滚动条引起的意外布局偏移 - CSS 溢出模块级别 4 工作草案
- GitHub 问题 #92
- CSS 工作组在 TPAC：CSS 有什么新内容？ 包括一个 手绘提案，用于概述属性值的表格。