firefox 不支持 ::-webkit-scrollbar，仅能用 scrollbar-width 和 scrollbar-color 有限逼近，且不支持圆角、渐变、阴影等修饰，移动端和深色模式下兼容性更差。
Firefox 无法“完美模拟” WebKit 的 ::-webkit-scrollbar，因为它是私有、未标准化的实验性伪元素，Firefox 从未实现它（截至 2026 年 10 月）。你只能用 Firefox 原生支持的 scrollbar-width 和 scrollbar-color 做有限逼近，且必须接受视觉和控制力上的降级。
为什么直接写 ::-webkit-scrollbar 在 Firefox 里完全无效
这不是兼容性问题，而是功能缺失：Firefox 从不解析 ::-webkit-scrollbar 及其子伪类（如 ::-webkit-scrollbar-thumb），它们被浏览器引擎直接忽略。即使你在 CSS 里写了，DevTools 的 “Computed” 面板也搜不到任何 scrollbar 相关样式。试图用 @supports not (-webkit-appearance: none) 检测并 fallback 是徒劳的——Firefox 不报错，也不渲染，只是静默跳过。
scrollbar-width 和 scrollbar-color 的真实能力边界
这两个属性是 Firefox 唯一可用的滚动条控制手段，但限制极严：
-
scrollbar-width只接受auto、thin、none—— 没有像素值，thin在 Firefox 97+ 才稳定，且实际宽度由系统决定（通常约 12px），无法精确设为 8px 或 14px -
scrollbar-color仅接收两个颜色：scrollbar-color: <thumb><track></track></thumb>，顺序不能反；不支持渐变、阴影、圆角、边框、透明度过渡等任何修饰 - 它们只在根元素（
html）或明确设置了overflow: auto/scroll的容器上生效；写在子元素里无效 - Firefox 不支持
scrollbar-corner、scrollbar-button等任何扩展，也无法隐藏箭头或调整滑块尺寸比例
如何让 Chrome 和 Firefox 的滚动条“看起来差不多”
没有“完美模拟”，只有务实妥协。关键不是复刻细节，而是统一基础感知：
- 先写 WebKit 规则，确保 Chrome/Edge/Safari 有完整样式；再用
@supports (scrollbar-width: thin)包裹 Firefox 专属规则，避免污染其他浏览器 - 把 WebKit 的
::-webkit-scrollbar宽度设为12px，接近 Firefoxthin的实际渲染宽度，减少粗细断层 - Webkit 的
::-webkit-scrollbar-thumb背景色用纯色（如#6c63ff），不加渐变或 border，让它和 Firefox 的scrollbar-color第一个值保持一致 - Webkit 的
::-webkit-scrollbar-track也用纯色（如#f5f5f5），对应scrollbar-color第二个值，避免 Firefox 因不支持轨道阴影而显得突兀 - 放弃圆角、hover 缩放、滑块边框等 WebKit 特有交互——Firefox 根本不支持，强行保留会导致跨浏览器体验割裂
移动端和深色模式下的隐形陷阱
iOS Safari 对 ::-webkit-scrollbar 支持极弱（iOS 16+ 才开始有限支持），而 Firefox for Android 完全不支持 scrollbar-width（它沿用系统滚动条）。这意味着你写的整套规则，在移动设备上大概率失效。深色模式下，@media (prefers-color-scheme: dark) 不能直接包裹 scrollbar-color 声明——Firefox 不识别该媒体查询内的滚动条属性，必须单独为深色主题重新声明整个 scrollbar-color 值对，并确保它与背景对比足够（例如 scrollbar-color: #a777e3 #1e1e1e）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
