CSS滚动条样式自定义兼容性差异_使用伪元素与scrollbar-width

::-webkit-scrollbar 在 Firefox 中不生效，因其是 WebKit/Blink 专属伪元素；Firefox 仅支持 scrollbar-width 和 scrollbar-color，且不支持自定义轨道/滑块样式如圆角、阴影。Chrome/Firefox/Edge 里 ::-webkit-scrollbar 为啥在 Firefox 不生效因为 ::-webkit-scrollbar 是 WebKit/Blink 内核专属伪元素，Firefox 完全不识别它——哪怕你写了也毫无反应，控制台也不会报错，纯静默失效。Firefox 用的是另一套机制：scrollbar-width 和 scrollbar-color 这两个 CSS 属性，且只支持 auto、thin、none 三种值，不支持自定义轨道/滑块颜色以外的样式（比如圆角、阴影、背景图）。scrollbar-width: thin 仅在 Firefox 中启用紧凑滚动条，但具体尺寸不可控scrollbar-color: #6c6c6c #f1f1f1 第一个值是滑块色，第二个是轨道色，顺序反了就无效Edge 96+ 和 Chrome 98+ 已支持 scrollbar-width，但仅限于 none 或 auto，thin 仍被忽略想全局统一滚动条样式，::-webkit-scrollbar + scrollbar-width 怎么配才不翻车必须分开写，且用 @supports 做安全包裹，否则 Firefox 会把带 ::-webkit-scrollbar 的整条规则块当无效语法跳过，导致后续声明（比如 scrollbar-width）也被连带忽略。正确写法是把 WebKit 专属样式和 Firefox 专属属性完全隔离，各自用特性检测兜底：立即学习“前端免费学习笔记（深入）”； arXiv Xplorer ArXiv 语义搜索引擎，帮您快速轻松的查找，保存和下载arXiv文章。