前言

优化后的滚动条会提亮我们的网站页面。

所以该网站的滚动条样式优化如下：

html::-webkit-scrollbar {
    width: 30px;
    height: 30px;
}
html::-webkit-scrollbar-thumb {
    background: -webkit-gradient(linear,left top,left bottom,from(#ff8a00),to(#e52e71));
    background: linear-gradient(180deg,#ff8a00,#e52e71);
    border-radius: 30px;
    box-shadow: inset 2px 2px 2px hsla(0,0%,100%,.25), inset -2px -2px 2px rgba(0,0,0,.25);
}
html::-webkit-scrollbar-track {
    background: linear-gradient(90deg,#201c29,#201c29 1px,#100e17 0,#100e17);
}
复制代码

那么::-webkit-scrollbar、::-webkit-scrollbar-thumb和::-webkit-scrollbar-track是什么以及怎么用请继续往下阅读。

webkit内核下

这些伪元素仅使用在支持webkit的浏览器上（如Chrome和Safari）。

在图上就能更清晰地呈现：

总结：这些伪元素支持Chrome Edge、Opera Safari、Android webview、Chrome for Android、Opera for Android、Safari on iOS和Samsung Internet,不支持Firefox、Internet Explorer和Firefox for Android。所以想要兼容其余浏览器，就得转Trident（IE）内核下目录。

当然webkit提供的不止这些，还有很多伪类，更丰富滚动条样式：

根据这些知识，可以得出CSS-TRICKS这个网站的滚动条样式：

1. 水平滚动条高30px,垂直滚动条宽30px
2. 滚动条上的滚动滑块背景色是从上到下#ed4f32渐变到#f5f5f5，边框圆角是30px，内部阴影是x方向上和y方向上平移2px和-2px,阴影颜色分别是hsla(0,0%,100%,.25)和rgba(0,0,0,.25)
3. 滚动条轨道背景色渐变

写炫酷的滚动条样式是要积累的。

不会写box-shoadow可以使用Box-shadow_generator生成器

伪元素+伪类更能精准定位达到意想不到的效果。

作用在滚动条的上半边

html::-webkit-scrollbar-track-piece:vertical:start {
    background: rgb(225, 126, 16);
}
复制代码

滚动条的上半边就是背景色是rgb(225, 126, 16)：

焦点不在滑块上

html::-webkit-scrollbar-thumb:window-inactive {
    background: rgb(160, 87, 221);
}
复制代码

鼠标在滚动条递减的按钮上

.div-2::-webkit-scrollbar-button:decrement:hover {
    background: #fff;
}
复制代码

各伪元素的颜色区分图

红色 ::-webkit-scrollbar

橙色 ::-webkit-scrollbar-button

黄色 ::-webkit-scrollbar-thumb

绿色 ::-webkit-scrollbar-track

青色 ::-webkit-scrollbar-track-piece

蓝色 ::-webkit-scrollbar-corner
复制代码

textarea下的-webkit-resizer

 紫色 ::-webkit-resizer 
复制代码

默认浏览器

自定义滚动条案例

简约风格的

胶囊风格的

彩条风格的

两色风格的

图片按钮的

Trident（IE）内核下

在图上就能更清晰地呈现：

都是color，所以在IE上只能改颜色

经测试IE7以上，scrollbar-3dlight-color:、scrollbar-color和scrollbar-darkshadow-color就起不到作用。

所以，只要有耐心，快去实现头图的滚动条吧。

所有demo的预览地址

参考文献

::-webkit-scrollbar

scrollbar-color

一个学习编程技术的公众号。每天推送高质量的优秀博文、开源项目、实用工具、面试技巧、编程学习资源等等。目标是做到个人技术与公众号一起成长。欢迎大家关注，一起进步，走向全栈大佬的修炼之路