2024年4月28日发(作者：)

html滚动条颜色如何设置

我们为大家收集整理了关于html滚动条颜色，以方便大家参考。

 IE是最早提供滚动条的样式支持，好多年了，但是其它浏览器一直没有支

持，IE独孤求败了。这些样式规则很简单：scrollbar-arrow-color: color; /*三

角箭头的颜色*/scrollbar-face-color: color; /*立体滚动条的颜色（包括箭头部分

的背景色）*/scrollbar-3dlight-color: color; /*立体滚动条亮边的颜色*/scrollbar-

highlight-color: color; /*滚动条的高亮颜色（左阴影？）*/scrollbar-shadow-

color: color; /*立体滚动条阴影的颜色*/scrollbar-darkshadow-color: color; /*立

体滚动条外阴影的颜色*/scrollbar-track-color: color; /*立体滚动条背景颜色

*/scrollbar-base-color: color; /*滚动条的基色*/webkit不再是用简单的几个CSS

属性，而是一坨的CSS伪元素：-webkit-scrollbar

scrollbar-button

滚动条整体部分-webkit-

外层轨道-webkit-滚动条两端的按钮-webkit-scrollbar-track

scrollbar-track-piece

thumb

内层轨道，滚动条中间部分（除去）-webkit-scrollbar-

（拖动条？滑块？滚动条里面可以拖动的那个，肿幺翻译好呢？）-

webkit-scrollbar-corner 边角-webkit-resizer 定义右下角拖动块的样式通过这些

伪元素，可以完全的重写一个网站的滚动条样式。当然webkit提供的不止这

些，还有很多伪类，可以更丰富滚动条样式：:horizontal –

horizontal伪类应用于水平方向的滚动条:vertical – vertical伪类应

用于竖直方向的滚动条:decrement – decrement伪类应用于按钮和

内层轨道（track piece）。它用来指示按钮或者内层轨道是否会减小视窗的位

置（比如，垂直滚动条的上面，水平滚动条的左边。）:increment –

increment伪类和decrement类似，用来指示按钮或内层轨道是否会增大视窗

的位置（比如，垂直滚动条的下面和水平滚动条的右边。）:start –