前言

最近翻笔记，看到之前移动端对滚动条问题的处理记录，所以把滚动条相关的知识点重新翻看了一遍。其中滚动条伪元素相关的内容，挺有趣的，感觉组合起来，没准能玩出不错的效果。

在开始freestyle，先强调一下，接下来要介绍的知识点，有些是非标准，有些是实验中的功能，所以功能仅供参考，生产环境慎重使用。

滚动条

滚动条的伪元素选择器还挺多的，所以应该能实现很多好玩的效果。

知识点

先来看一下滚动条相关的伪元素选择器都有哪些，都是控制什么功能的。

以下知识点来自MDN。

伪元素	含义	规范
::-webkit-scrollbar	会影响设置了 overflow:scroll; 的元素的滚动条样式。	非标准: 该特性是非标准的，请尽量不要在生产环境中使用它！
::-webkit-scrollbar-button	滚动条上的按钮（上下箭头）。	同上
::-webkit-scrollbar-thumb	滚动条上的滚动滑块。	同上
::-webkit-scrollbar-track	滚动条轨道。	同上
::-webkit-scrollbar-track-piece	滚动条没有滑块的轨道部分。	同上
::-webkit-scrollbar-corner	当同时有垂直滚动条和水平滚动条时交汇的部分。通常是浏览器窗口的右下角。	同上
::-webkit-resizer	出现在某些元素底角的可拖动调整大小的滑块。	同上

组合效果

可以通过滚动条的伪元素选择器，实现不同的展示效果。但是通过分析不难发现，这些伪元素选择器是可以组合起来使用的。

我试验了几个组合效果，如下：

类型	效果展示	实现方案
无滚动条		无滚动条并不是简单粗暴。一般移动端的页面都会隐藏滚动条，美观且避免影响用户操作。
圆角滚动条		通过设置::-webkit-scrollbar的值，可以修改滚动条的样式
异色滚动块		通过设置::-webkit-scrollbar-thumb的值，可以设置滚动条上的滚动滑块的样式，可以将滚动滑块的颜色和滚动条轨道不一致，进而形成明显区分的效果。
补全滚动条交汇		当同时有垂直滚动条和水平滚动条时交汇的部分。当父容器的背景颜色和滚动条轨道的背景颜色不一致时，会出现一块空缺，这个时候通过设置::-webkit-scrollbar-corner的值，可以调整空缺展示样式
条纹滚动条		设置滚动滑块的背景样式，可以让滚动条呈现出不同效果。比如右图就是一个带三色条纹的滚动条。

效果代码

总结

滚动条的伪元素选择器目前还是非标准特性，正式生产不建议使用。

但是组合实现各种展示效果，还挺有趣的，今天也特别有收获的一天。

CSS样式真有趣，光写样式我感觉自己能写一天。

偶尔翻出来珍藏的技术书，读几章，有了新想法的感觉真不赖。

关于作者