Chrome/Edge/Safari 支持 ::-webkit-scrollbar 自定义滚动条，Firefox 仅支持 scrollbar-width 和 scrollbar-color；需用 @supports 分离逻辑，接受视觉差异。
Chrome/Firefox滚动条样式为什么只在部分浏览器生效
因为 ::-webkit-scrollbar 是 WebKit/Blink 内核专属伪元素（Chrome、Edge、Safari 支持），Firefox 从 64 版本起已**完全不支持**该语法，仅保留极简的 scrollbar-width 和 scrollbar-color 两个 CSS 属性。这意味着你写的 ::-webkit-scrollbar-thumb 在 Firefox 里压根不会解析，更不会渲染。
常见错误现象：::-webkit-scrollbar 规则写了但滚动条毫无变化——先确认当前是否在 Chrome/Edge；若在 Firefox，检查是否误用了 WebKit 语法而没配后备方案。
- 只对 Chromium 系浏览器（Chrome、Edge、新版 Opera）有效
- Firefox 需单独用
scrollbar-width: thin | auto | none控制宽度，scrollbar-color: <thumb><track></track></thumb>控制颜色（不支持圆角、阴影等） - Safari 15.4+ 开始支持
scrollbar-width和scrollbar-color，但依然不支持::-webkit-scrollbar的完整能力
::-webkit-scrollbar-thumb 圆角和颜色怎么写才生效
必须同时定义 ::-webkit-scrollbar、::-webkit-scrollbar-track、::-webkit-scrollbar-thumb 三者，且 ::-webkit-scrollbar 本身要设宽高，否则整个自定义链会失效。圆角只对 ::-webkit-scrollbar-thumb 有效，border-radius 值不能超过滚动条高度的一半（否则被截断）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
::-webkit-scrollbar必须设width（垂直滚动条）或height（水平滚动条），例如width: 12px -
::-webkit-scrollbar-thumb推荐用background-color+border-radius: 6px（对应 12px 宽滚动条），避免用渐变或图片导致兼容性下降 - 不要给
::-webkit-scrollbar-thumb设opacity或过渡动画——多数浏览器不触发重绘，拖动时会卡顿或闪烁 - 示例片段：
::-webkit-scrollbar { width: 12px; } ::-webkit-scrollbar-track { background: #f1f1f1; } ::-webkit-scrollbar-thumb { background: #888; border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { background: #555; }
滚动条皮肤影响页面性能和布局吗
不影响布局流，但可能轻微拖慢滚动帧率——尤其在大量使用 box-shadow、background-image 或复杂 border-radius 时。浏览器对 ::-webkit-scrollbar 的渲染不走主线程合成，但过度修饰仍会触发频繁重绘。
关键点：
- 避免在
::-webkit-scrollbar-thumb中使用filter: blur()或transform，这些会强制图层提升，增加内存开销 - 移动端 Safari 完全忽略
::-webkit-scrollbar，写了也白写，别为 iOS 加冗余样式 - 如果容器有
overflow: overlay（已废弃），现代浏览器会无视，统一按overflow: auto处理，无需额外 hack
如何让自定义滚动条在 Firefox 里不彻底消失
靠降级控制：用 @supports 分离逻辑，WebKit 用伪元素，Firefox/Safari 用原生属性兜底。不能指望“一套代码通吃”，必须接受视觉差异。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 先写 Firefox/Safari 兼容方案：
scrollbar-color: #888 #f1f1f1; scrollbar-width: thin; - 再用
@supports (selector(::-webkit-scrollbar))包裹 WebKit 专属规则（注意：不是所有版本都支持该@supports检测，稳妥起见可直接写在后面，由浏览器自行忽略不识别的规则） - 不要试图用 JS 检测内核再注入样式——滚动条是 UA 样式层，JS 无法读取其计算值，也无法可靠监听“滚动条出现/消失”事件
真正麻烦的不是写法，而是得同时维护两套逻辑，且它们永远无法做到像素级一致。圆角、hover 反馈、尺寸微调……这些细节在 Firefox 里要么不存在，要么表现不同。接受这个前提，比硬刚兼容性更省时间。
