scrollbar-color

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

scrollbar-color CSS 属性设置滚动条轨道（track）和滑块（thumb）的颜色。

轨道是指滚动条的背景，其一般是固定且与滚动位置无关的。

滑块是指滚动条的滑动部分，其通常浮动于轨道的顶部。

当为文档的根元素设置了 scrollbar-color 值时，这些值将被应用于视口滚动条。

语法

css
/* 关键字值 */
scrollbar-color: auto;

/* <color> 值 */
scrollbar-color: rebeccapurple green; /* 两个有效的颜色。
第一个应用于滚动条的滑块，第二个应用于轨道。 */

/* 全局值 */
scrollbar-color: inherit;
scrollbar-color: initial;
scrollbar-color: revert;
scrollbar-color: revert-layer;
scrollbar-color: unset;

值

<scrollbar-color>

定义滚动条的颜色。

auto 在没有任何其他相关滚动条颜色属性的情况下，滚动条的轨道部分的默认平台渲染。
<color> <color> 将第一种颜色应用于滚动条滑块，第二种颜色应用于滚动条轨道。

备注： @media (forced-colors: active) 会将 scrollbar-color 设置为 auto。

无障碍考虑

当使用具有特定颜色值的 scrollbar-color 属性时，作者应确保指定的颜色之间具有足够的对比度。对于关键字值，用户代理应确保其使用的颜色具有足够的对比度。参见 WCAG 2.0 的技术：G183：使用 3:1 的对比度。

形式定义

初始值auto
适用元素scrolling boxes
是否是继承属性是
计算值as specified
动画类型按计算值的类型

形式语法

scrollbar-color = 
  auto        |
  <color>{2}

示例

为溢出滚动条配色

CSS

css
.scroller {
  width: 300px;
  height: 100px;
  overflow-y: scroll;
  scrollbar-color: #007 #bada55;
}

HTML

html
<div class="scroller">
  Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
  daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens
  corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts
  fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber
  earthnut pea peanut soko zucchini.
</div>

结果

规范

Specification
CSS Scrollbars Styling Module Level 1
# scrollbar-color

浏览器兼容性

BCD tables only load in the browser

参见