scrollbar-color

这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

scrollbar-colorCSS属性设置滚动条轨道和拇指的颜色

track(轨道是指滚动条,其一般是固定的而不管滚动位置的背景。

thumb拇指)是指滚动条通常漂浮在轨道的顶部上的移动部分。

初始值auto
适用元素scrolling boxes
是否是继承属性yes
适用媒体visual
计算值as specified
Animation typea color
正规顺序per grammar

句法

/* Keyword values */
scrollbar-color: auto;
scrollbar-color: dark;
scrollbar-color: light;

/* <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: unset;

<scrollbar-color>
定义滚动条的颜色。
auto 在没有任何其他相关滚动条颜色属性的情况下,滚动条的轨道部分默认平台渲染。
dark 显示黑色滚动条,可以是平台提供的滚动条的深色变体,也可以是带深色的自定义滚动条。
light 显示一个轻量滚动条,可以是平台提供的滚动条的轻微变体,也可以是带有浅色的自定义滚动条。
<color> <color> 将第一种颜色应用于滚动条拇指,第二种颜色应用于滚动条轨道。

注意: 用户代理必须将scrollbar-color根元素上设置的任何应用于视口。

形式语法

auto | dark | light | <color>{2}

where
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>

where
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )

where
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

例子

CSS

.scroller {
  width: 300px;
  height: 100px;
  overflow-y: scroll;
  scrollbar-color: rebeccapurple green;
}

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

可访问性问题

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

规范

规格 状态 评论
CSS Scrollbars Level 1
scrollbar-color
Working Draft Initial definition.

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
scrollbar-color
Experimental
Chrome No support NoEdge No support NoFirefox Full support 64
Notes
Full support 64
Notes
Notes On macOS, you need to set the General > Show scroll bars setting in System Preferences to "Always" for this property to have any effect.
Full support 63
Disabled
Disabled From version 63: this feature is behind the layout.css.scrollbar-color.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 64
Full support 64
Full support 63
Disabled
Disabled From version 63: this feature is behind the layout.css.scrollbar-color.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.