语法
css/* 关键字值 */
scrollbar-color: auto;
/*
scrollbar-color: rebeccapurple green; /* 两个有效的颜色。
第一个应用于滚动条的滑块，第二个应用于轨道。 */
/* 全局值 */
scrollbar-color: inherit;
scrollbar-color: initial;
scrollbar-color: revert;
scrollbar-color: revert-layer;
scrollbar-color: unset;
值
定义滚动条的颜色。
auto
在没有任何其他相关滚动条颜色属性的情况下，滚动条的轨道部分的默认平台渲染。
将第一种颜色应用于滚动条滑块，第二种颜色应用于滚动条轨道。
备注：
@media (forced-colors: active) 会将 scrollbar-color 设置为 auto。
无障碍考虑
当使用具有特定颜色值的 scrollbar-color 属性时，作者应确保指定的颜色之间具有足够的对比度。对于关键字值，用户代理应确保其使用的颜色具有足够的对比度。参见 WCAG 2.0 的技术：G183：使用 3:1 的对比度。
形式定义
初始值auto适用元素scrolling boxes是否是继承属性是计算值as specified动画类型按计算值的类型
形式语法
scrollbar-color = auto |
此语法反映了基于 CSS Scrollbars Styling Module Level 1 的最新标准。并非所有浏览器都已实现全部内容。有关支持信息，请参阅浏览器兼容性。
示例
为溢出滚动条配色
CSS
css.scroller {
width: 300px;
height: 100px;
overflow-y: scroll;
scrollbar-color: #007 #bada55;
}
HTML
html
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.
结果
规范
Specification
CSS Scrollbars Styling Module Level 1# scrollbar-color
浏览器兼容性
Loading…
参见
CSS 溢出模块
CSS 滚动条样式模块
overflow
scrollbar-gutter
scrollbar-width
Help improve MDN
Was this page helpful to you?
Yes
No
Learn how to contribute
This page was last modified on 2025年7月15日 by MDN contributors.
View this page on GitHub • Report a problem with this content