scrollbar-gutter

有限可用性

此功能并非基线功能，因为它在一些最广泛使用的浏览器中无法使用。

**scrollbar-gutter** CSS 属性允许作者为滚动条预留空间，防止内容增长时发生不必要的布局变化，同时避免在不需要滚动时出现不必要的视觉效果。

元素的滚动条间隙是指内边框边缘和外填充边缘之间的空间，浏览器可能在此处显示滚动条。如果不存在滚动条，则间隙将被绘制为填充的扩展部分。

浏览器决定使用经典滚动条还是覆盖滚动条。

  • 经典滚动条始终放置在间隙中，在存在时会占用空间。
  • 覆盖滚动条放置在内容之上，而不是间隙中，并且通常是半透明的。

语法

css
/* Initial value */
scrollbar-gutter: auto;

/* "stable" keyword, with optional modifier */
scrollbar-gutter: stable;
scrollbar-gutter: stable both-edges;

/* Global values */
scrollbar-gutter: inherit;
scrollbar-gutter: initial;
scrollbar-gutter: revert;
scrollbar-gutter: revert-layer;
scrollbar-gutter: unset;

值

auto

初始值。当overflow为scroll时，或者当overflow为auto且盒子溢出时，经典滚动条会创建一个间隙。覆盖滚动条不占用空间。

stable

当使用经典滚动条时，即使盒子没有溢出，当overflow为auto、scroll或hidden时，间隙也会存在。当使用覆盖滚动条时，间隙将不存在。

both-edges

如果盒子内联开始/结束边缘之一上存在间隙，则另一个边缘上也会存在间隙。

正式定义

初始值auto
适用于滚动盒子
继承否
计算值如指定
动画类型discrete

正式语法

scrollbar-gutter = 
  auto                   |
  stable && both-edges?

示例

下面的示例显示了scrollbar-gutter属性的不同值将如何影响一个可滚动的div元素（.container），该元素包含一个或多个段落。

注意：在示例的图像中，用户的系统设置设置为经典滚动条（始终显示）。

示例 1

防止不必要的布局变化，因为内容的增长或缩小会导致滚动条出现/消失，因此会为其保留一个空间。

css
.container {
  scrollbar-gutter: stable;
}

A containing div element with a paragraph of text inside and a space to the right where the scrollbar is

示例 2

在盒子的两侧添加对称间距，以便内容居中

css
.container {
  scrollbar-gutter: stable both-edges;
}

A containing div element with a paragraph of text inside, a space to the right where the scrollbar is and a matching empty space to the left

示例 3

对齐一个不可滚动元素和一个与其相邻的可滚动元素的内容：此示例显示了两个并排的 div。左侧的 div 没有滚动，但右侧的 div 有滚动。两者都应用了scrollbar-gutter，这也为左侧没有可滚动内容的 div 保留了空间。这是一种很好的技术，可以保持内容宽度一致。

css
.container1 {
  overflow: hidden;
  scrollbar-gutter: stable;
}

.container2 {
  scrollbar-gutter: stable;
}

Two adjacent divs containing text, both with space for a scrollbar

覆盖滚动条

作为参考，此图像显示了与上面相同的 div，但用户的系统设置设置为覆盖滚动条。注意，这里滚动条只会在用户滚动时显示，并且位于内容之上，因此不会为其保留任何空间，并且scrollbar-gutter属性没有效果。

One div with text, no visible scrollbar

规范

规范
CSS 溢出模块级别 3
# scrollbar-gutter-property

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅