自定义滚动条没有统一标准。WebKit 系浏览器用一整套伪元素，Firefox 用两个属性，两者互不通用，只写一套在另一类浏览器里等于没写。
两套写法
/* WebKit 与 Blink */
.panel::-webkit-scrollbar { width: 10px; }
.panel::-webkit-scrollbar-track { background: #f1f3f5; }
.panel::-webkit-scrollbar-thumb {
background: #adb5bd;
border-radius: 5px;
}
.panel::-webkit-scrollbar-thumb:hover { background: #868e96; }
/* Firefox */
.panel {
scrollbar-width: thin;
scrollbar-color: #adb5bd #f1f3f5;
}
两套写法互不冲突，可以放在同一条规则里。Firefox 只提供宽度与配色两个维度，做不到滑块圆角与悬停渐变，接受这一差异比强行统一更省事。
作用位置
- 选择器要落在真正产生滚动的容器上，写在 body 或 html 上对内层容器无效；
- 容器必须确实溢出：没有 overflow 取值为 auto 或 scroll，伪元素不会生成；
- 伪元素要成对定义，只写 thumb 时 track 会沿用系统默认外观。
三条不要做
- 不要用
::-webkit-scrollbar { display: none }彻底隐藏。触屏设备与键盘用户失去滚动位置参照，scrollbar-width: none 同理。 - 不要把滑块做得过窄。8px 是兼顾可点击与视觉的分界线，窄于 6px 时鼠标很难抓到。
- 不要引入 JS 模拟滚动条替代表现。原生滚动保留惯性、键盘与无障碍行为，模拟方案需要把这些逐一补回。
兼容边界
iOS Safari 与部分内置 WebView 不支持自定义滚动条属性，会沿用系统样式。样式声明不会报错，只是不生效，不需要为这类环境准备降级代码。