马黑黑 发表于 2026-3-7 07:49

CSS：scrollbar-gutter属性简介

<style>
        .showBox { font-size: 18px; }
        .showBox p { margin: 10px 0; }
        .showBox code, .showBox pre { background: rgba(0,128,128,.25); padding: 2px 6px; tab-size: 4; }
        .showBox pre { padding: 10px 20px; white-space: pre-wrap; word-wrap: break-word; }
        .showBox pre code { padding: 0; background: none; }
        .showBox blockquote { margin: 10px 20px; padding: 2px 15px; border-left: 3px solid skyblue; background: rgba(240,248,255,.65); }
</style>

<div class="showBox">
    <p>scrollbar-gutter 属性用于处理垂直滚动条，为纵向滚动预留控件，防止布局跳动。该属性于2024年12月其被当作标准CSS属性。gutter 是排水沟之意，这里指滚动条的槽。</p>
    <blockquote>
      <p>
            <strong>scrollbar-gutter属性</strong>
      </p>
      <p>语法 ：
            <code>scrollbar-gutter: auto | stable | stable both-edges</code>
      </p>
      <p>说明（
            <strong>仅针对经典滚动条（Classic Scrollbars）</strong> ：
      </p>
      <ol>
            <li>auto - 初始值，存在滚动条时，它会从内容区域挤占一部分空间</li>
            <li>stable - 始终为滚动条预留好空间，即使不出现滚动条</li>
            <li>stable both-edges - 同2，并在左侧预留相同尺寸的空间</li>
      </ol>
      <p>针对更具现代特性的
            <strong>叠加滚动条（Overlay Scrollbars）</strong>，scrollbar-gutter 属性不起作用，因为叠加滚动条不占用布局空间，浏览器会忽略这个预留空间指令。通常，叠加滚动条浮于内容层上方，透明或部分透明，类似于移动端（iOS/Android）和 macOS 系统的原生体验。
      </p>
    </blockquote>
    <p>以下示例设置两个里外 div，内 div 高度大于外 div，迫使外 div 出现垂直滚动条，并通过
      <code>scrollbar-gutter</code> 属性设置滚动条空间占用状态，可以更改其值观察其行为表现：
    </p>
    <pre><code id="cbox">&lt;style&gt;
    .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);
    }
&lt;/style&gt;
&lt;div class="outer"&gt;
    &lt;div class="inner"&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>
    <h2>效果：</h2>
    <div id="sbox"></div>
    <p>这里只是演示 gutter 属性值中的一个，需要观察、体验其余值的表现可将代码存为本地HTML文档（头尾补上完整的页面其余标签），如果想省事，可以直接拿到
      <a href="http://mhh.52qingyin.cn/api/tiebao/tiebao.html" title="说明">帖宝</a> 运行测试。
    </p>
    <p>如果希望定义的是Web页面的滚动条，将相关代码放到 body{} 选择器即可（注意，存为本地文档的话 Web 页不能缺少body标签）。</p>
</div>

<script>
    sbox.innerHTML = cbox.innerText;
</script>

梦江南 发表于 2026-3-7 07:52

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

马黑黑 发表于 2026-3-7 08:07

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

{:4_191:}

红影 发表于 2026-3-7 14:24

如果不设置scrollbar-color:，出现的滚动条的颜色就是默认吧。{:4_204:}

马黑黑 发表于 2026-3-7 17:53

红影 发表于 2026-3-7 14:24
如果不设置scrollbar-color:，出现的滚动条的颜色就是默认吧。

对。这就是所谓的缺省值。

我们经常说道缺省、默认这两个概念。某个属性，缺省时的值也称默认值，就是如果不设置它，它就采用默认值。例如 body 的 margin，如果不设置，那么，就默认使用浏览器预设的 8px

红影 发表于 2026-3-7 23:38

马黑黑 发表于 2026-3-7 17:53
对。这就是所谓的缺省值。

我们经常说道缺省、默认这两个概念。某个属性，缺省时的值也称默认值，就是 ...

嗯嗯，知道了{:4_204:}

马黑黑 发表于 2026-3-7 23:57

红影 发表于 2026-3-7 23:38
嗯嗯，知道了

{:4_190:}
页: [1]
查看完整版本: CSS：scrollbar-gutter属性简介