Chrome、Edge 和 Safari 支持 ::-webkit-scrollbar 伪类定制滚动条，Firefox 不支持；仅对设置 overflow: auto/scroll 的块级容器生效，需成套书写且注意移动端兼容性与性能限制。
Chrome、Edge 和 Safari 可以用 ::-webkit-scrollbar 系列伪类定制滚动条，Firefox 不支持，别在生产环境指望它跨浏览器生效。
哪些元素能加自定义滚动条
只对「有滚动行为」的块级容器生效：设置了 overflow: auto 或 overflow: scroll 的 div、section、textarea 等；body 也可以，但要注意全局影响。
常见失效场景：
-
overflow: hidden或未触发滚动（内容没溢出）→ 伪类不渲染 - 父容器
overscroll-behavior: contain之类干扰了滚动链 → 滚动条可能不出现 - 用了
transform或will-change导致合成层变化 → 某些旧版 Chrome 下伪类丢失
::-webkit-scrollbar 相关伪类怎么配齐
必须成套写，漏掉任意一个都可能导致样式异常或回退到默认样式：
-
::-webkit-scrollbar：滚动条整体容器，设宽高（横向滚动条用height，纵向用width） -
::-webkit-scrollbar-track：轨道背景，推荐加border-radius和透明度 -
::-webkit-scrollbar-thumb：滑块本体，必须设background-color，否则不可见 -
::-webkit-scrollbar-thumb:hover：悬停态，可加大对比度或加过渡 -
::-webkit-scrollbar-corner：右下角交汇处（双滚动条时出现），不设会留白或显示默认色
示例最小可用片段：
div.scrollable {
overflow-y: auto;
}
div.scrollable::-webkit-scrollbar {
width: 8px;
}
div.scrollable::-webkit-scrollbar-track {
background: #f5f5f5;
border-radius: 4px;
}
div.scrollable::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 4px;
}
div.scrollable::-webkit-scrollbar-thumb:hover {
background: #a0a0a0;
}
兼容性与实际限制要点
Firefox 完全无视 ::-webkit-scrollbar，目前无标准替代方案；若需统一体验，只能用 JS 滚动库（如 simplebar）模拟滚动条，但会增加 bundle 体积和事件处理复杂度。
移动端（iOS Safari / Android Chrome）支持有限：
- iOS 16+ 才开始部分支持
::-webkit-scrollbar-thumb的background，之前只认background-color且不能带渐变 - Android Chrome 对
border-radius渲染不稳定，建议用4px以内整数 - 所有 WebKit 移动端都不支持
::-webkit-scrollbar-button（箭头按钮），别白费劲
性能上，过度使用 box-shadow 或 filter 在 ::-webkit-scrollbar-thumb 上容易引发滑动卡顿，尤其低端安卓机。
真正要上线时，先确认目标用户浏览器分布；如果 Firefox 占比超 15%，或者需要 iOS 15 以下兼容，就别碰这个伪类——它不是 CSS 标准，只是 WebKit 的实现快照，随时可能变。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
