因为::-webkit-scrollbar仅WebKit/Blink浏览器（Chrome/Edge/Safari）支持，Firefox完全不识别，须用scrollbar-width和scrollbar-color替代，且后者仅作用于html/body或可滚动容器。
为什么直接写 ::-webkit-scrollbar 在 Firefox 里完全没反应
因为 ::-webkit-scrollbar 系列伪元素是 WebKit/Blink 专属（Chrome、Edge、Safari），Firefox 从不识别——它用的是 scrollbar-width 和 scrollbar-color 这两个 CSS 自定义属性，而且只在 :root 或滚动容器上生效。Less Mixins 本身不解决跨引擎差异，但能帮你把两套规则“按需注入”，避免手写重复代码或漏掉浏览器判断。
如何用 Mixin 封装 WebKit + Firefox 双路径样式
核心思路：一个 Mixin 接收颜色参数，内部用条件分支生成对应规则；不依赖 JavaScript 检测，纯 CSS 输出，确保 SSR 和静态构建友好。
示例 Mixin 定义：
.scrollbar-style(@thumb-color: #888, @track-color: #f1f1f1) {
/* WebKit/Blink */
&::-webkit-scrollbar {
width: 8px;
}
&::-webkit-scrollbar-track {
background: @track-color;
}
&::-webkit-scrollbar-thumb {
background: @thumb-color;
border-radius: 4px;
}
&::-webkit-scrollbar-thumb:hover {
background: darken(@thumb-color, 10%);
}
<p>/<em> Firefox </em>/
scrollbar-width: thin;
scrollbar-color: @thumb-color @track-color;
}使用时只需：
.my-container {
.scrollbar-style(#4a90e2, #eef2f7);
}- 必须作用于有滚动行为的容器（如
overflow: auto或scroll） -
scrollbar-color在 Firefox 中仅对auto或scroll生效，hidden会禁用该声明 - 不要在 Mixin 内加
@supports包裹——WebKit 规则在 Firefox 下被忽略是安全的，反之亦然
IE 和旧版 Edge 怎么办？别封装，直接放弃
IE 完全不支持任何自定义滚动条 API；旧 Edge（EdgeHTML）虽支持部分 ::-webkit-scrollbar 语法，但行为不稳定且已停止维护。强行兼容会导致 Mixin 膨胀、维护成本陡增，而实际用户占比低于 0.3%（2024 年主流统计）。
如果你的项目仍需支持 IE：
- 删掉整个 Mixin，改用 JS 方案（如
simplebar），但会破坏原生滚动性能和惯性 - 或保留默认滚动条，用
overflow: overlay（仅 Safari 支持）做微调，不值得封装
容易被忽略的细节：伪元素选择器的层级与继承失效
::-webkit-scrollbar-thumb 不继承父容器的 color 或 font-size，所有样式必须显式声明；同时，它不响应 transform、filter 或 animation（Chrome 115+ 开始部分支持 transition，但仅限 background）。
常见翻车点：
- 在 Mixin 中写
transition: all .2s→ 大部分浏览器忽略，应限定为transition: background .2s - 用
inherit设background→ 无效，必须传参或硬编码 - 给容器设了
direction: rtl→ WebKit 下滚动条自动换边，但 Firefox 的scrollbar-color不受影响，视觉可能错位
真正需要关注的不是“怎么写全”，而是“哪些根本不能写”。Mixins 封装省的是重复劳动，不是浏览器能力的魔法。
