bem 类名不能直接匹配 ::-webkit-scrollbar 伪元素，因其只响应标签+伪元素或属性选择器组合；bem 修饰符需作为作用域前缀加在可滚动容器（如 html）上，通过 .scrollbar--theme::-webkit-scrollbar-track 等方式绑定样式，且 firefox 仅支持 scrollbar-color 和 scrollbar-width。
为什么 BEM 类名不能直接匹配 ::-webkit-scrollbar 伪元素
因为 ::-webkit-scrollbar 及其子伪元素（如 ::-webkit-scrollbar-thumb）不接受普通类选择器，只响应「标签 + 伪元素」或「属性选择器」组合。你写 .scrollbar__track 完全无效——浏览器根本不会把它和滚动条轨道关联起来。
BEM 的 block--modifier 实际作用是作为「作用域开关」：它被加在可滚动容器上，再通过 .scrollbar--dark::-webkit-scrollbar-track 这种写法，把整套样式绑定到该容器的滚动条上。
- 必须给有
overflow: auto或scroll且内容溢出的容器加 BEM 类名，否则伪元素规则不生效 -
.scrollbar本身不控制任何滚动条部件，它只是个命名前缀，真正起效的是修饰符（如--compact）触发的规则集 - Firefox 完全忽略
::-webkit-scrollbar，只能靠scrollbar-color和scrollbar-width回退
如何用 scrollbar--theme 修饰符切换多套滚动条样式
核心是把修饰符映射为伪元素规则的作用域前缀，而不是给每个部件重复写修饰符。比如定义深色主题时，不要分散写：
.scrollbar--dark::-webkit-scrollbar { width: 8px; }
.scrollbar--dark::-webkit-scrollbar-track { background: #1e1e1e; }
.scrollbar--dark::-webkit-scrollbar-thumb { background: #555; }
而应统一用一个父类名控制整套行为，避免遗漏或错配。实际项目中建议：
- 所有滚动条样式都挂载在
html或body上实现全局生效（html.scrollbar--minimal） - 局部覆盖时，在具体容器上加修饰符，如
<div class="list scrollbar--compact"> <li>用 CSS 自定义属性（<code>--scrollbar-thumb-color）配合var()提升可维护性，但注意::-webkit-scrollbar内部不支持var()，需预编译或 JS 注入 - 以为
scrollbar-color: #666 #eee能让 Firefox 滚动条也变细——其实scrollbar-width: thin才控制宽度，且仅限 Firefox - 把
::-webkit-scrollbar规则直接套在body上，却忘了 Firefox 需要单独声明在html上才稳定生效 - 没加
-ms-overflow-style: none（旧版 Edge）导致样式冲突，尤其在 Windows 环境下
scrollbar-width 和 scrollbar-color 在 Firefox 中的限制
Firefox 只认 scrollbar-width（值为 auto、thin、none）和 scrollbar-color（两个颜色值：滑块、轨道），不支持圆角、阴影、渐变等任何视觉修饰。
这意味着你在 Chromium/Safari 里写的 border-radius: 8px 或 box-shadow: inset 0 0 4px rgba(0,0,0,0.2) 对 Firefox 完全无效。常见误判是：
全局滚动条样式该写在 html 还是 body？
写在 html 上更可靠。实测 body 上的 scrollbar-color 在部分 Chrome 版本中失效，而 html 是唯一能稳定影响整个视口滚动条的载体。
如果你用 BEM 做全局控制，推荐这样组织：
html.scrollbar--modern {
scrollbar-color: #5a5a5a #f5f5f5;
scrollbar-width: thin;
}
html.scrollbar--modern::-webkit-scrollbar {
width: 6px;
}
html.scrollbar--modern::-webkit-scrollbar-thumb {
background-color: #5a5a5a;
border-radius: 3px;
}
html.scrollbar--modern::-webkit-scrollbar-track {
background-color: #f5f5f5;
}
关键点在于：BEM 修饰符必须出现在伪元素选择器的最左侧（即作用域容器），且该容器必须是实际产生滚动行为的节点——对全局而言，就是 html 元素本身。
容易被忽略的是，::-webkit-scrollbar 规则一旦写在全局，就会覆盖所有子容器的滚动条，除非子容器显式加了不同修饰符并重写规则。这点在嵌套滚动区域（如弹窗内表格）中极易引发样式穿透问题。
