最近做业务被批滚动条太难看，由于一些东西是通过v-html插入的，所以还无法用UI框架里的滚动条组件，所以修改原生滚动条是唯一的选择。Scrollbar.app进入了我的视线，不过是英文，而且功能并不完善，所以参照其代码自己做了一个（顺便吐槽一句，这个作者用vue3但是vue2的语法）

原生滚动条的CSS伪类

做这个功能首先就得了解清楚对应的CSS，由于历史原因滚动条的CSS标准直到最近才定下来，而之前基于Webkit内核的浏览器都是用::-webkit-scrollbar伪类，根据MDN给出的兼容性表来看只要能撇去小部分的浏览器那只狐狸，在生产环境完全可以使用。

所以，滚动条CSS伪类主要有以下几种：

原生滚动条标准CSS

最近滚动条样式定下来了，不过功能相对少，而且浏览器要求版本较高。

scrollbar-color

滚动条颜色，只能定滑块和轨道。

scrollbar-color: <滑块颜色> <轨道颜色>;

兼容性看下图

scrollbar-width

滚动条宽度，只能设置默认自动和细条或不显示

scrollbar-width: auto;
scrollbar-width: thin;
scrollbar-width: none;

兼容性看下图

成果

于是，为了方便我做了这个编辑器，除了Scrollbar.app给出的功能外，添加了自定义选择器名称、交汇处颜色、滚动条宽度标准CSS以及默认自动跟随系统主题功能。

开源地址，欢迎Issue和PR：/lvzhenbo/sc…

PS：如果这个小项目对你有用，请给个小小的星星吧。