今天跟大家唠唠我折腾 HTML 滚动条样式的事儿，这玩意儿默认的样式是真的丑，每次看到都忍不住想动手改改。
我就是想着简单改个颜色啥的，让它看着顺眼点。就在 CSS 里开始瞎鼓捣。
我找到 `::-webkit-scrollbar` 这个东西，感觉像是突破口。这玩意儿能控制整个滚动条的宽度和高度。
css
::-webkit-scrollbar {
width: 10px; / 竖向滚动条宽度 /
height: 10px; / 横向滚动条高度 /
搞完这个，我就想改滚动条的滑块，就是拖动的那一块。找到 `::-webkit-scrollbar-thumb` 伪元素。
css
::-webkit-scrollbar-thumb {
background-color: #888; / 滑块颜色 /
border-radius: 5px; / 圆角 /
颜色是改，也加圆角，但是总感觉差点意思。又去查查，发现还能改滚动条的轨道，就是滑块背景那部分。
css
::-webkit-scrollbar-track {
background-color: #f1f1f1; / 轨道颜色 /
这样一搞，整个滚动条的颜色就统一起来，看着稍微舒服一点。
但是！问题来，我发现火狐浏览器居然不支持这些 `::-webkit-scrollbar` 的伪元素！IE 就更不用说，直接摆烂。这让我有点郁闷，难道要写一堆浏览器兼容的代码？
后来我发现火狐虽然不支持 `::-webkit-scrollbar`，但是它有一些其他的 CSS 属性可以用来修改滚动条的颜色。虽然不能完全自定义样式，但至少能让它不那么丑。具体的属性我记不太清，可以自己去搜一下火狐滚动条样式相关的资料。
我决定妥协一下，只在 Chrome 和 Edge 这种 Webkit 内核的浏览器上使用自定义滚动条样式，其他浏览器就用默认的样式。虽然不能做到完美，但至少保证大部分用户的体验。
这回折腾滚动条样式，算是学到不少东西。虽然没有达到完美的效果，但也让我对 CSS 的伪元素有更深的解。以后有机会再继续研究研究，争取做出更漂亮的滚动条！
