scrollbar-color
scrollbar-color CSS 属性设置滚动条的轨道和滑块的颜色。
轨道（track）是指滚动条的背景，它通常是固定的，与滚动位置无关。
滑块（thumb）是指滚动条的可移动部分，它通常浮动在轨道上方。
当在文档的根元素上设置 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;
值
<scrollbar-color>-
定义滚动条的颜色。
auto在没有其他相关滚动条颜色属性的情况下，滚动条轨道部分的默认平台渲染。 <color> <color>将第一个颜色应用于滚动条滑块，第二个颜色应用于滚动条轨道。
注意： @media (forced-colors: active) 会将 scrollbar-color 设置为 auto。
无障碍
当使用带有特定颜色值的 scrollbar-color 属性时，作者应确保指定的颜色之间有足够的对比度。对于关键字值，UA 应确保其使用的颜色有足够的对比度。参见 WCAG 2.0 技术：G183：使用 3:1 的对比度。
正式定义
正式语法
scrollbar-color =
auto |
<color>{2}
示例
为溢出滚动条着色
CSS
css
.scroller {
width: 300px;
height: 100px;
overflow-y: scroll;
scrollbar-color: #000077 #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>
结果
规范
| 规范 |
|---|
| CSS 滚动条样式模块级别 1 # scrollbar-color |
浏览器兼容性
加载中…