scrollbar-color

Avatar of Andy Adams
Andy Adams

DigitalOcean 为您的旅程每个阶段提供云产品。 立即开始使用 200 美元的免费信用额度!

scrollbar-color 属性控制滚动条的两种颜色:滑块颜色轨道颜色scrollbar-colorCSS 工作组的滚动条模块级别 1 草案 的一部分,截至撰写本文时,该草案仍在进行中。

scrollbar-color 之前,开发人员没有标准的方法来更改浏览器滚动条的默认外观,而不必诉诸于通过 overflow: hidden 隐藏滚动条并渲染基于 JavaScript 的滚动条或使用 浏览器前缀的滚动条属性。 另一方面,使用 scrollbar-color,我们可以将滚动条样式设置为与设计匹配,而无需诉诸于重新执行浏览器功能或使用供应商前缀。

.scrollable-element {
  scrollbar-color: red yellow;
}
scrollbar with yellow track and red thumb
尽情使用自定义颜色

scrollbar-color 还将接受 darklight 的值以匹配用户的偏好,如果他们使用的是类似于 Mac OSX 上的深色模式 的东西。

.scrollable-element {
  scrollbar-color: dark;
}

截至 2019 年 3 月,任何浏览器都不支持 darklight 值。 在 Firefox 中受支持。 有关详细信息,请参阅下面的 浏览器支持部分

语法

scrollbar-color: auto | dark | light | <color>;

scrollbar-color 接受以下值

  • auto 是默认值,将为用户代理渲染标准滚动条颜色。
  • dark 将告诉用户代理使用更暗的滚动条以匹配当前配色方案。
  • light 将告诉用户代理使用更亮的滚动条以匹配当前配色方案。
  • <color> 指定要用于滚动条的两种颜色。 第一种颜色用于“滑块”或滚动条的可移动部分,它显示在顶部。 第二种颜色用于“轨道”或滚动条的固定部分。

示例

这结合了新的规范语法和 WebKit 前缀的东西。

浏览器支持

此浏览器支持数据来自 Caniuse,其中包含更多详细信息。 数字表示浏览器在该版本及更高版本中支持该功能。

桌面

ChromeFirefoxIEEdgeSafari
1216411121TP*

移动设备 / 平板电脑

Android ChromeAndroid FirefoxAndroidiOS Safari
127127127*13.4-13.7*

资源