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

马黑黑

浏览器的滚动条一直以来都是“灰滑块+白轨道”的固定样子。一直以来也都有人对其样式甚为不满，企图通过设置浏览器的私有属性等方式去改变浏览器滚动条的外观。现在，现代浏览器已经逐步支持标准的滚动条CSS样式定制，主要有两个属性： scrollbar-color 和 scrollbar-width，前者用于设置滚动条滑块和轨道颜色，后者用于设置滚动条的厚度。

🔷 支持 scrollbar-color/width 浏览器版本

Chrome 121+
Edge 121+
Firefox 64+
Safri 26.2+

🔷 语法

/* css语法 */
scrollbar-color: color1 color2; /* 滑块颜色 轨道颜色 */
scrollbar-width: auto; /* auto | thin | none */

🔷 示例一 ：web页滚动条

<style>
    /* 页面滚动条设置 */
    html {
        scrollbar-color: rebeccapurple beige; /* 滑块+轨道颜色 */
        scrollbar-width: thin; /* auto | thin | none */
    }
    /* 设置一个元素令页面出现滚动条 */
    .sDiv {
        width: 200vh;
        height: 400vw;
    }
</style>
<div class="sDiv"></div>

示例二 ：元素滚动条

<style>
    /* 主元素 ：固定尺寸、使用滚动条 */
    .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);
    }
</style>
<div class="mum">
    <div class="son"></div>
</div>

是否使用自定义滚动条，取决于开发者喜好与业务需求。

马黑黑

演示 ：改变本页面的滚动条颜色

使用随机颜色改变滚动条滑块和轨道颜色