马黑黑 发表于 2026-3-2 08:45

CSS: 定制滚动条颜色和厚度

<style>
    .showBox { font-size: 18px; }
    .showBox p { margin: 10px 0; }
    .showBox code, .showBox pre { background: aliceblue; 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 { border-left: 3px solid skyblue; padding: 2px 15px; background: aliceblue; }
    .showBox table { border-collapse: collapse; white-space: pre-wrap; box-sizing: border-box; }
    .showBox th, .showBox td { padding: 8px 10px; border: 1px solid #999; }
    .showBox tr:firstChild { text-align: center; }
</style>

<div class="showBox">
    <p>浏览器的滚动条一直以来都是“灰滑块+白轨道”的固定样子。一直以来也都有人对其样式甚为不满，企图通过设置浏览器的私有属性等方式去改变浏览器滚动条的外观。现在，现代浏览器已经逐步支持标准的滚动条CSS样式定制，主要有两个属性：
      <code>scrollbar-color</code> 和
      <code>scrollbar-width</code>，前者用于设置滚动条滑块和轨道颜色，后者用于设置滚动条的厚度。
    </p>
    <h2>&#128311; 支持 scrollbar-color/width 浏览器版本</h2>
    <blockquote>
      <p>Chrome 121+
            <br>Edge 121+
                <br>Firefox 64+
                  <br>Safri 26.2+
                  </p>
                </blockquote>
                <h2>&#128311; 语法</h2>
                <blockquote>
                  <p>/* css语法 */
                        <br>scrollbar-color: color1 color2; /* 滑块颜色 轨道颜色 */
                            <br>scrollbar-width: auto; /* auto | thin | none */
                            </p>
                        </blockquote>
                        <h2>&#128311; 示例一 ：web页滚动条</h2>
                        <pre><code>&lt;style&gt;
    /* 页面滚动条设置 */
    html {
      scrollbar-color: rebeccapurple beige; /* 滑块+轨道颜色 */
      scrollbar-width: thin; /* auto | thin | none */
    }
    /* 设置一个元素令页面出现滚动条 */
    .sDiv {
      width: 200vh;
      height: 400vw;
    }
&lt;/style&gt;
&lt;div class="sDiv"&gt;&lt;/div&gt;</code></pre>
                        <h2>示例二 ：元素滚动条</h2>
                        <pre><code>&lt;style&gt;
    /* 主元素 ：固定尺寸、使用滚动条 */
    .mum {
            margin: 20px auto;
      width: 800px;
      height: 600px;
      border: 1px solid rebeccapurple;
      overflow: auto; /* 关键 ：是否使用滚动条*/
      scrollbar-width: thin; /* 滚动条厚度 */
      scrollbar-color: yellow lightblue; /* 滚动条颜色 */
    }
    /* 子元素 ：用于撑大空间 */
    .son {
      width: 3200px;
      height: 2400px;
      background: linear-gradient(to bottom right, pink, lightblue, purple, gold);
    }
&lt;/style&gt;
&lt;div class="mum"&gt;
    &lt;div class="son"&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>
    <p>是否使用自定义滚动条，取决于开发者喜好与业务需求。</p>
</div>

马黑黑 发表于 2026-3-2 09:00

<h1>演示 ：改变本页面的滚动条颜色</h1>
<p><br><br></p>
<p style="text-align: center;">
    <button type="button" id="btnChangeScrollbarColor" value="1">使用随机颜色改变滚动条滑块和轨道颜色</button>
</p>

<script>
    btnChangeScrollbarColor.onclick = () => {
      const htmlDom = document.querySelector('html');
      if (!htmlDom) return;

      const c1 = Math.random().toString(16).substring(2, 8);
      const c2 = Math.random().toString(16).substring(2, 8);

      htmlDom.style.scrollbarColor = `#${c1} #${c2}`;
    };
</script>

杨帆 发表于 2026-3-2 14:58

哇~漂亮的滚动条滑块和轨道颜色！谢谢马老师经典讲授与精彩示范{:4_176:}

霜染枫丹 发表于 2026-3-2 21:25

我很喜欢这些小细节，看着舒畅。

马老师元宵节快乐！！{:4_204:}{:4_190:}

马黑黑 发表于 2026-3-2 21:40

霜染枫丹 发表于 2026-3-2 21:25
我很喜欢这些小细节，看着舒畅。

马老师元宵节快乐！！

{:4_180:}

霜染枫丹 发表于 2026-3-2 21:44

马黑黑 发表于 2026-3-2 21:40


谢马老师，这个我抱走了！{:4_173:}

https://www.yueyijyw.com/data/attachment/forum/202603/02/213807zxkb3icxk4ctkwpw.jpg

马黑黑 发表于 2026-3-2 22:12

霜染枫丹 发表于 2026-3-2 21:44
谢马老师，这个我抱走了！

{:4_191:}

红影 发表于 2026-3-2 23:02

滚动条还能调，这个太厉害了{:4_199:}

红影 发表于 2026-3-2 23:03

七试了二楼的调整，果然发生了变化，太神奇了{:4_187:}

马黑黑 发表于 2026-3-2 23:18

红影 发表于 2026-3-2 23:03
七试了二楼的调整，果然发生了变化，太神奇了

10多年前我们就在论坛自定义过元素的滚动条颜色，不过那时候使用的是浏览器的私有属性

马黑黑 发表于 2026-3-2 23:19

红影 发表于 2026-3-2 23:02
滚动条还能调，这个太厉害了

帖子介绍的两个滚动条属性已经是标准属性了
页: [1]
查看完整版本: CSS: 定制滚动条颜色和厚度