最近做业务被批滚动条太难看，由于一些东西是通过v-html插入的，所以还无法用UI框架里的滚动条组件，所以修改原生滚动条是唯一的选择。Scrollbar.app进入了我的视线，不过是英文，而且功能并不完善，所以参照其代码自己做了一个（顺便吐槽一句，这个作者用vue3但是vue2的语法）
原生滚动条的CSS伪类
做这个功能首先就得了解清楚对应的CSS，由于历史原因滚动条的CSS标准直到最近才定下来，而之前基于Webkit内核的浏览器都是用::-webkit-scrollbar伪类，根据MDN给出的兼容性表来看只要能撇去小部分的浏览器那只狐狸，在生产环境完全可以使用。
所以，滚动条CSS伪类主要有以下几种：
::-webkit-scrollbar：整个滚动条的样式::-webkit-scrollbar-button：滚动条上下滚动按钮的样式::-webkit-scrollbar-thumb：滚动滑块的样式::-webkit-scrollbar-track：轨道的样式::-webkit-scrollbar-track-piece：轨道没有滑块部分的样式::-webkit-scrollbar-corner：横竖滚动条交汇处的样式::-webkit-resizer：可调整大小的滑块样式（textarea里的）
原生滚动条标准CSS
最近滚动条样式定下来了，不过功能相对少，而且浏览器要求版本较高。
scrollbar-color
滚动条颜色，只能定滑块和轨道。
scrollbar-color: <滑块颜色> <轨道颜色>;
兼容性看下图
scrollbar-width
滚动条宽度，只能设置默认自动和细条或不显示
scrollbar-width: auto;
scrollbar-width: thin;
scrollbar-width: none;
兼容性看下图
成果
于是，为了方便我做了这个编辑器，除了Scrollbar.app给出的功能外，添加了自定义选择器名称、交汇处颜色、滚动条宽度标准CSS以及默认自动跟随系统主题功能。
开源地址，欢迎Issue和PR：github.com/lvzhenbo/sc…
PS：如果这个小项目对你有用，请给个小小的星星吧。
