如何用CSS设置滚动条颜色？

作者：袖梨 2022-07-02

我们在浏览网页的时候有时可以看到网页滚动条颜色不是系统默认的样式，而是漂亮的红色或其它颜色样式，其实这就是在网页代码之间加入代码来实现的，具体是哪些代码呢？　
页面滚动条代码及其解释如下：
scrollbar-3d-light-color 设置或检索滚动条亮边框颜色
scrollbar-highlight-color 设置或检索滚动条3D界面的亮边（ThreedHighlight）颜色
scrollbar-face-color 设置或检索滚动条3D表面（ThreedFace）的颜色
scrollbar-arrow-color 设置或检索滚动条方向箭头的颜色
scrollbar-shadow-color 设置或检索滚动条3D界面的暗边（ThreedShadow）颜色
scrollbar-dark-shadow-color 设置或检索滚动条暗边框（ThreedDarkShadow）颜色
scrollbar-base-color 设置或检索滚动条基准颜色。其它界面颜色将据此自动调整
关于CSS Scrollbar属性的具体参数及含义，可以参考这里。

请注意，有些朋友在实际的使用中，CSS定义了滚动条颜色，可测试时发现并没有起作用。这到底是什么原因呢？
请注意定义滚动条颜色CSS代码的选择符！在以往的教程中，选择符定义为Body即实现了改变滚动条颜色的效果。而现在最好将选择符改成html！如上面的实例所示。

写个实例demo吧（请在webkit浏览器下观看），不能光说不练。CSS也很简单。

代码如下

复制代码

copytext
/* 设置滚动条的样式 */
::-webkit-scrollbar {
width: 12px;
}

/* 滚动槽 */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(0,0,0,0.1);
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(255,0,0,0.4);
}

在你使用的时候，参考上面的代码只要改变颜色值就可以了。凡是#号后面的，都是颜色代码，颜色代码为16进制。