自定义滚动条不能直接用 .scrollbar 类名匹配伪元素，因 ::-webkit-scrollbar 等仅支持属性选择器或标签+伪元素组合；bem 类名仅作作用域开关，需加在滚动容器上并配合伪元素规则生效，如 .scrollbar--dark::-webkit-scrollbar-track。
滚动条自定义为什么不能直接用 .scrollbar 这类通用类名
因为浏览器原生滚动条的伪元素（::-webkit-scrollbar 及其子部件）不接受普通 CSS 类选择器，必须用属性选择器或标签+伪元素组合来命中。BEM 的 block__element 命名本身不生效——真正起作用的是你把它作为属性值塞进 class，再在伪元素规则里用属性选择器匹配。
比如你写 .scrollbar__track，它本身对 ::-webkit-scrollbar-track 没用；但如果你给容器加 class="scrollbar scrollbar--custom"，再写 .scrollbar--custom::-webkit-scrollbar-track，这才控制到轨道。
- BEM 类名只是“开关”，不是“钩子”：它负责触发哪一套滚动条样式，而不是直接代表滚动条部件
- 所有滚动条伪元素都只能挂载在**有滚动行为的容器**上（即
overflow: auto/scroll且内容溢出），不能单独存在 -
::-webkit-scrollbar系列只在 Chromium 和 Safari 生效，Firefox 完全不支持，需用scrollbar-width/scrollbar-color回退
如何用 BEM 区分多套滚动条主题（比如 dark / compact / minimal）
核心是把 BEM 修饰符（--modifier）映射为滚动条规则的作用域。不要给每个伪元素重复写修饰符，而是用父容器类名统一控制整套样式。
例如：
.scrollbar {
overflow-y: auto;
}
.scrollbar--dark::-webkit-scrollbar {
width: 12px;
}
.scrollbar--dark::-webkit-scrollbar-track {
background: #1e1e1e;
}
.scrollbar--dark::-webkit-scrollbar-thumb {
background: #555;
}
.scrollbar--dark::-webkit-scrollbar-thumb:hover {
background: #777;
}
/* Firefox 回退 */
.scrollbar--dark {
scrollbar-color: #555 #1e1e1e;
scrollbar-width: thin;
}
- 修饰符必须加在**滚动容器元素**上，不是某个子元素；否则伪元素规则无法继承作用域
- 避免嵌套过深：不要写
.scrollbar__wrapper--dark::-webkit-scrollbar，这会失效——WebKit 不认这种复合结构 - 多个修饰符可叠加，如
scrollbar scrollbar--dark scrollbar--thin，但需确保 CSS 中对应规则不冲突
为什么 ::-webkit-scrollbar-thumb 经常不响应 hover 或 active
因为 WebKit 对伪元素状态的支持有限：::-webkit-scrollbar-thumb:hover 有效，但 ::-webkit-scrollbar-thumb:active 在多数版本中被忽略；且伪元素不触发 DOM 事件，无法靠 JS 模拟。
- 替代方案：用
:hover配合过渡动画模拟“按下感”，例如缩放transform: scale(0.98)或微调背景色 - 确保容器有
will-change: scroll-position或contain: strict可提升伪元素状态响应灵敏度（部分 Chrome 版本） - 若需精确控制拖拽反馈，必须放弃纯 CSS，改用
element.addEventListener('scroll')+ 自定义滑块 DOM（此时 BEM 可用于管理该 DOM 结构，如scrollbar__thumb-custom）
BEM 命名下如何安全复用滚动条样式而不污染全局
关键在于限制伪元素规则的作用范围——仅当容器明确携带 BEM block 类时才启用，且避免使用标签名或通配符选择器。
- 禁止写
div::-webkit-scrollbar或*::-webkit-scrollbar，这会全局生效，破坏其他组件 - 推荐模式：
[class*="scrollbar"]::-webkit-scrollbar太宽泛；应严格用.scrollbar::-webkit-scrollbar，并确保只有目标容器带这个 class - 若项目用 CSS-in-JS 或 Shadow DOM，BEM 类名可结合
:host(.scrollbar)或data-bem="scrollbar"属性选择器进一步隔离 - 注意 SSR 场景：服务端渲染时伪元素不生效，需确保降级样式（如默认滚动条宽度、颜色）仍可用
真正难的不是命名，是让同一份 BEM 类名在不同浏览器里触发不同机制，同时不干扰其他滚动容器——这要求你始终把伪元素规则和容器 class 绑定，而不是试图用 BEM 描述滚动条内部结构。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
