scrollbar-gutter

描述

scrollbar-gutter CSS 属性允许作者为滚动条保留空间，防止随着内容的增长而发生不必要的布局更改，同时还避免在不需要滚动时出现不必要的视觉效果。 元素的滚动条装订线是内部边框边缘和外部填充边缘之间的空间，浏览器可以在其中显示滚动条。如果不存在滚动条，则装订线将被绘制为填充的延伸。 浏览器决定是否使用经典滚动条或覆盖滚动条：经典的滚动条总是放置在装订线中，存在时会占用空间。覆盖滚动条放置在内容上方，而不是放置在装订线中，并且通常是部分透明的。

效果展示

语法

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

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

值

• auto 初始值。当 overflow 为 scroll 或 overflow 为 auto 并且框溢出时，经典滚动条会创建装订线。覆盖滚动条不占用空间。
• stable 使用经典滚动条时，如果 overflow 为 auto 、 scroll 或 hidden ，即使框没有溢出，也会出现装订线。当使用覆盖滚动条时，装订线将不会出现。
• both-edges 如果框的内嵌开始/结束边缘之一上存在装订线，则相对边缘上也会存在另一个装订线。