直接写::-webkit-scrollbar在firefox中完全无效，因其仅支持scrollbar-width和scrollbar-color；less mixin应静态输出两套互斥规则，无需@supports包裹，且必须作用于overflow: auto/scroll容器。
直接写 ::-webkit-scrollbar 在 Firefox 里完全没反应，不是你代码错了，是它根本不认这个语法；Firefox 只响应 scrollbar-width 和 scrollbar-color，而且只在可滚动容器上生效。用 Less Mixin 封装，不是为了“模拟 JS 检测”，而是把两套互不兼容的规则，按需、静态、无冗余地输出。
为什么不能用 @supports 包裹 WebKit 规则
很多人试图用 @supports (selector(::-webkit-scrollbar)) 来隔离 WebKit 规则——但这是无效的：@supports 不支持伪元素选择器检测，所有主流浏览器都会忽略该条件，导致规则被跳过或报错。Less 编译时也不解析运行时支持性，它只做字符串拼接。
- WebKit 规则（
::-webkit-scrollbar系列）在 Firefox/EdgeHTML/Safari 16.4+（已弃用）中被安全忽略，无需包裹 - Firefox 规则（
scrollbar-width/scrollbar-color）在 Chrome/Safari 中被忽略，同样无需包裹 - 强行加
@supports只会增加编译体积、干扰调试，且无法覆盖 Safari 旧版对::-webkit-scrollbar的部分支持差异
如何正确封装双路径 scrollbar Mixin
核心是让同一个 Mixin 同时输出 WebKit 路径和 Firefox 路径，不依赖 UA、不生成多余声明、不引入 JS 运行时逻辑。
- 必须作用于有滚动行为的容器：调用前确保该选择器已设置
overflow: auto或overflow: scroll，否则scrollbar-color在 Firefox 中会被静默丢弃 - 参数设计要覆盖关键可变项：
@thumb-color（滑块色）、@track-color（轨道色）、@width（仅 WebKit 有效，单位建议px） - Firefox 不支持自定义宽度，
scrollbar-width只接受auto/thin/none三个字面值，不能传变量计算 - 不要在 Mixin 内写
html或body选择器——它应通用到任意容器，比如.chat-history或.sidebar-menu
示例定义：
.scrollbar-style(@thumb-color: #888, @track-color: #f1f1f1, @width: 8px) {
/* WebKit/Blink */
&::-webkit-scrollbar {
width: @width;
}
&::-webkit-scrollbar-track {
background: @track-color;
}
&::-webkit-scrollbar-thumb {
background: @thumb-color;
border-radius: @width * 0.5;
}
&::-webkit-scrollbar-thumb:hover {
background: darken(@thumb-color, 10%);
}
<p>/<em> Firefox </em>/
scrollbar-width: thin;
scrollbar-color: @thumb-color @track-color;
}</p>
IE 和旧 Edge（EdgeHTML）要不要兼容
不用封装，直接放弃。
- IE 11 及更早版本：完全不支持任何自定义滚动条 API，
::-webkit-scrollbar和scrollbar-color均无效 - 旧 Edge（EdgeHTML，如 18 及之前）：部分识别
::-webkit-scrollbar，但行为不稳定（例如 hover 不触发、尺寸错位），且微软已终止支持 - 2026 年主流统计显示，这两类浏览器合计用户占比低于 0.3%，强行兼容会使 Mixin 膨胀、维护成本陡增，且无法保证体验一致
容易被忽略的关键点
最常翻车的地方不在写法，而在调用上下文：
-
scrollbar-color在 Firefox 中只对设置了overflow: auto或overflow: scroll的元素生效；若父容器是overflow: hidden，子容器即使有滚动内容，该声明也会被忽略 - 不要在全局
html或body上调用该 Mixin——它会污染整个页面滚动条，包括下拉菜单、弹窗等临时浮层，导致交互异常 - Less 编译后 CSS 是静态的，无法响应运行时 dpr 变化或主题切换；如果项目需要暗色模式适配滚动条，应在调用时传入动态变量（如
@thumb-color: var(--scroll-thumb)），而非在 Mixin 内硬编码
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
