滚动条颜色属性
最后更新：2026-09-13
scrollbar-color 滚动条颜色属性
scrollbar-color 用于自定义浏览器滚动条的颜色，包括滑块（thumb）和轨道（track）两部分。它是 CSS Scrollbars 规范的一部分，提供了一种简单的方式来让滚动条与页面整体配色保持一致，无需使用 JavaScript 插件。
| 分类 | |
|---|---|
| 初始值 | auto |
| 继承 | 是 |
| 适用于 | |
| 可动画 | |
| CSS 版本 | CSS3 |
| 状态 | 标准 |
📝 语法
scrollbar-color: auto | dark | light | <color> <color>;⚙️ 取值
| 值 | 类型 | 描述 |
|---|---|---|
auto | dark | light | 关键字 | 预设配色 |
<color> <color> | 值 | 滑块与轨道颜色 |
▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| scrollbar-color | ✓ v79 | ✓ v12 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| 所有主流浏览器均支持 | |||||
提示： scrollbar-color 目前主要在基于 Chromium 和 Firefox 的浏览器中支持；Safari 和旧版浏览器需要使用 ::-webkit-scrollbar 伪元素。
提示： 两个颜色值分别对应滑块和轨道；如果只写一个值，浏览器会自动计算另一个。
❓ 常见问题
Qscrollbar-color 和 ::-webkit-scrollbar 有什么区别？
Ascrollbar-color 是 W3C 标准属性，两个颜色分别指定滑块和轨道，简单但只能改颜色和宽窄；::-webkit-scrollbar 是 WebKit/Chromium 私有伪元素，可自定义宽度、圆角、边框，能力更强但非标准。Firefox 用标准属性，Chromium/Safari 用伪元素。
Qdark 和 light 是什么效果？
Adark 告诉浏览器按暗色主题渲染滚动条——深色滑块配浅色轨道；light 相反，浅色滑块配深色轨道。具体颜色由浏览器根据平台和主题决定，常用于配合深色模式。如果对颜色有精确要求，直接写两个颜色值：第一个滑块、第二个轨道。
Qscrollbar-color 为什么在 Chrome/Safari 里不生效？
Ascrollbar-color 在 Chrome 121 版本起才正式支持（此前 Chromium 只用 ::-webkit-scrollbar），Safari 至今不认标准属性。跨浏览器统一滚动条外观没有单一方案：标准属性管 Firefox 和新版 Chrome，伪元素管 Safari/旧版 Chrome。
Q如何让滚动条颜色支持所有浏览器？
A采用「双轨」方案：先用标准属性 scrollbar-color 为 Firefox（和新版 Chrome）设置滑块、轨道颜色，再用 ::-webkit-scrollbar 及 ::-webkit-scrollbar-thumb 为 WebKit 内核写样式。要求更高时可用 JS 滚动条库兜底。
🏷️ 相关属性
💡 相关案例
📚 相关教程
