CSS：scrollbar-gutter属性简介

马黑黑

scrollbar-gutter 属性用于处理垂直滚动条，为纵向滚动预留控件，防止布局跳动。该属性于2024年12月其被当作标准CSS属性。gutter 是排水沟之意，这里指滚动条的槽。

scrollbar-gutter属性

语法 ： scrollbar-gutter: auto | stable | stable both-edges

说明（ 仅针对经典滚动条（Classic Scrollbars） ：

1. auto - 初始值，存在滚动条时，它会从内容区域挤占一部分空间
2. stable - 始终为滚动条预留好空间，即使不出现滚动条
3. stable both-edges - 同2，并在左侧预留相同尺寸的空间

针对更具现代特性的 叠加滚动条（Overlay Scrollbars），scrollbar-gutter 属性不起作用，因为叠加滚动条不占用布局空间，浏览器会忽略这个预留空间指令。通常，叠加滚动条浮于内容层上方，透明或部分透明，类似于移动端（iOS/Android）和 macOS 系统的原生体验。

以下示例设置两个里外 div，内 div 高度大于外 div，迫使外 div 出现垂直滚动条，并通过 scrollbar-gutter 属性设置滚动条空间占用状态，可以更改其值观察其行为表现：

<style>
    .outer {
        margin: 20px auto;
        padding: 15px 0;
        width: 600px;
        height: 460px;
        border: 1px solid gray;
        overflow: auto; /* 确保内容溢出时出现滚动条 */
        scrollbar-color: pink snow;
        /* 核心 ：gutter属性可选值有 auto | stable | stable both-edges */
        scrollbar-gutter: stable both-edges;
    }
    .inner {
        width: 100%;
        height: 200%; /* 令外层div出现垂直滚动条 */
        background: linear-gradient(pink, gray, tan);
    }
</style>
<div class="outer">
    <div class="inner"></div>
</div>

效果：

这里只是演示 gutter 属性值中的一个，需要观察、体验其余值的表现可将代码存为本地HTML文档（头尾补上完整的页面其余标签），如果想省事，可以直接拿到 帖宝 运行测试。

如果希望定义的是Web页面的滚动条，将相关代码放到 body{} 选择器即可（注意，存为本地文档的话 Web 页不能缺少body标签）。

梦江南

谢谢黑黑辛苦，来学习了！

马黑黑

梦江南 发表于 2026-3-7 07:52
谢谢黑黑辛苦，来学习了！