firefox 64+ 完全不解析::-webkit-scrollbar，因其为 webkit 私有伪元素，会被静默丢弃；仅支持scrollbar-width和scrollbar-color两个标准属性，且须与 webkit 规则分离声明，否则整块样式被忽略。
为什么直接写 ::-webkit-scrollbar 在 Firefox 里完全没反应
因为 Firefox 从 64+ 版本起就彻底不解析 ::-webkit-scrollbar 这类 WebKit 私有伪元素——它根本不会进入样式计算流程，连报错都不会有。你写的整段规则会被浏览器静默丢弃。这不是“没生效”，而是“压根没看见”。常见错误现象是：Chrome 里滚动条变细了、有圆角，Firefox 里却还是默认粗灰条，甚至宽度都没变。
真正能被 Firefox 识别的只有两个标准属性：scrollbar-width 和 scrollbar-color。它们必须单独声明，且不能和 WebKit 规则混写在同一选择器块里，否则整个块都会被 Firefox 忽略。
@at-root 是 SCSS 封装跨浏览器滚动条样式的最稳妥方式
用 @mixin 抽取参数后，必须用 @at-root 把 WebKit 和 Firefox 的规则分别输出为顶层样式，避免交叉污染。如果写成嵌套结构，SCSS 编译后会把两者塞进同一个 CSS 块，Firefox 直接跳过整块。
实操建议：
- 定义
@mixin scrollbar($thumb: #888, $track: #eee, $size: 8px) - 在 mixin 内部用
@at-root分别包裹两套规则 - WebKit 部分只包含
::-webkit-scrollbar、::-webkit-scrollbar-track、::-webkit-scrollbar-thumb三个伪元素（::-webkit-scrollbar-button等极少用，反而增加兼容风险） - Firefox 部分只写
scrollbar-width和scrollbar-color，不加任何其他声明
哪些样式值在 Safari 或旧 Edge 上容易失效
Safari 16.4+ 开始对 ::-webkit-scrollbar-thumb 的 background-clip: content-box 和带 border 的圆角支持不稳定；旧版 Edge（EdgeHTML）对 rgba() 背景色和 border-radius 渲染异常，滑块可能变成直角或颜色发灰。
安全做法：
- 滑块背景优先用纯色
#888，避免渐变或透明度 - 轨道背景用
background而非background-color，防止某些版本忽略透明背景 - 圆角统一设为
border-radius: 4px，大于6px在 Safari 中可能被截断 - 务必给父容器加
overflow-y: auto且内容真实溢出，否则所有伪元素都不触发
移动端 iOS Safari 完全不支持 ::-webkit-scrollbar
iOS Safari（包括所有 iPhone/iPad 版本）至今未实现该伪元素，任何相关样式都会被忽略。这不是 bug，是 Apple 明确不支持。所以如果你的项目需要覆盖移动端，必须接受“iOS 下滚动条不可定制”这个事实，或者改用 JavaScript 滚动库（如 simplebar），但会带来额外 bundle 体积和无障碍风险。
关键提醒：不要试图用 @supports 检测 ::-webkit-scrollbar，它无法被 @supports 捕获——CSS 标准里没有这个特性描述符。唯一可靠检测方式是运行时 JS 判断 getComputedStyle 是否返回非空值，但生产环境极少需要。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
