「趣学前端」伪元素选择器，实现滚动条的极限拉扯

站长

2022年11月21日 18:07 · 阅读数 18

前言

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

在开始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的值，可以调整空缺展示样式
条纹滚动条		设置滚动滑块的背景样式，可以让滚动条呈现出不同效果。比如右图就是一个带三色条纹的滚动条。