scrollbar-color

Limited availability

此功能不是基线，因为它在一些最常用的浏览器中不起作用。

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

**轨道** 指的是滚动条的背景，通常在滚动位置改变时保持不变。

**滑块** 指的是滚动条的移动部分，通常漂浮在轨道之上。

当在文档的根元素上设置 scrollbar-color 值时，这些值将应用于视窗滚动条。

语法

css
/* Keyword values */
scrollbar-color: auto;

/* <color> values */
scrollbar-color: rebeccapurple green; /* Two valid colors.
The first applies to the thumb of the scrollbar, the second to the track. */

/* Global values */
scrollbar-color: inherit;
scrollbar-color: initial;
scrollbar-color: revert;
scrollbar-color: revert-layer;
scrollbar-color: unset;

Values

<scrollbar-color>

定义滚动条的颜色。

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

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

无障碍

当使用 scrollbar-color 属性和特定颜色值时，作者应确保指定颜色之间有足够的对比度。 对于关键字值，UA 应确保它们使用的颜色有足够的对比度。 请参阅 WCAG 2.0 技术：G183：使用 3:1 的对比度。

正式定义

初始值auto
适用于滚动框
继承yes
计算值如指定
动画类型通过计算值类型

正式语法

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

示例

Coloring overflow scrollbars

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>

Result

规范

Specification
CSS Scrollbars Styling Module Level 1
# scrollbar-color

浏览器兼容性

BCD tables only load in the browser

另请参阅