DigitalOcean 为您的旅程每个阶段提供云产品。 立即开始使用 200 美元的免费信用额度!
scrollbar-color
属性控制滚动条的两种颜色:滑块颜色 和 轨道颜色。scrollbar-color
是 CSS 工作组的滚动条模块级别 1 草案 的一部分,截至撰写本文时,该草案仍在进行中。
在 scrollbar-color
之前,开发人员没有标准的方法来更改浏览器滚动条的默认外观,而不必诉诸于通过 overflow: hidden
隐藏滚动条并渲染基于 JavaScript 的滚动条或使用 浏览器前缀的滚动条属性。 另一方面,使用 scrollbar-color
,我们可以将滚动条样式设置为与设计匹配,而无需诉诸于重新执行浏览器功能或使用供应商前缀。
.scrollable-element {
scrollbar-color: red yellow;
}

scrollbar-color
还将接受 dark
和 light
的值以匹配用户的偏好,如果他们使用的是类似于 Mac OSX 上的深色模式 的东西。
.scrollable-element {
scrollbar-color: dark;
}
截至 2019 年 3 月,任何浏览器都不支持 dark
和 light
值。 在 Firefox 中受支持。 有关详细信息,请参阅下面的 浏览器支持部分。
语法
scrollbar-color: auto | dark | light | <color>;
值
scrollbar-color
接受以下值
auto
是默认值,将为用户代理渲染标准滚动条颜色。dark
将告诉用户代理使用更暗的滚动条以匹配当前配色方案。light
将告诉用户代理使用更亮的滚动条以匹配当前配色方案。<color>
指定要用于滚动条的两种颜色。 第一种颜色用于“滑块”或滚动条的可移动部分,它显示在顶部。 第二种颜色用于“轨道”或滚动条的固定部分。

示例
这结合了新的规范语法和 WebKit 前缀的东西。
浏览器支持
此浏览器支持数据来自 Caniuse,其中包含更多详细信息。 数字表示浏览器在该版本及更高版本中支持该功能。
桌面
Chrome | Firefox | IE | Edge | Safari |
---|---|---|---|---|
121 | 64 | 11 | 121 | TP* |
移动设备 / 平板电脑
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
127 | 127 | 127* | 13.4-13.7* |