css 滚动条样式修改与隐藏的兼容写法

设计稿给了一条细细的灰色滚动条，做出来却是系统默认的粗条，Windows上尤其扎眼。改css 滚动条样式得分浏览器处理：Chrome和Edge走webkit前缀，Firefox有自己的两个标准属性，两套都写上效果才统一。

Chrome和Edge的伪元素写法

webkit内核浏览器用一组伪元素定位滚动条的各个部件：::-webkit-scrollbar是整体、::-webkit-scrollbar-track是轨道、::-webkit-scrollbar-thumb是滑块，后两个还能加:hover表示悬停状态。

组合起来给整页的纵向滚动条换肤：

::-webkit-scrollbar { width: 8px; }

::-webkit-scrollbar-track { background: none; }

::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 4px; }

只想改某个容器，就把选择器写在前面，比如.box::-webkit-scrollbar，只对这个盒子生效。

Firefox的属性写法

Firefox不支持webkit伪元素，用两条标准属性：scrollbar-width控制粗细，可选auto、thin、none三个值；scrollbar-color一次填两个颜色，第一个是滑块、第二个是轨道，比如scrollbar-color: #c1c1c1 none。加在html或目标容器上，效果和webkit版基本对齐。

显示与隐藏怎么控制

滚动条显不显示由overflow决定：auto是内容超出才出现，scroll是一直显示，hidden是彻底藏起来也不能滚。想要能滚动但不显示那条bar，Chrome侧把::-webkit-scrollbar的width或height设为0，Firefox侧用scrollbar-width:none，两边都写就全兼容了。

最后提醒：css 滚动条美化属于渐进增强，各浏览器本来就允许有差异，别死抠像素级一致，保证可滚动、不挡内容才是底线。