根本原因是 CSS 变量在 ::-webkit-scrollbar-thumb 中不可继承，且该伪元素不参与常规样式层叠；需在滚动容器上显式声明变量并确保无 scrollbar-color 等标准属性干扰。
为什么 --scrollbar-thumb-color 这类变量在 ::-webkit-scrollbar-thumb 里不生效
根本原因不是变量写错了，而是 CSS 变量在伪元素中默认不可继承，且 ::-webkit-scrollbar* 伪元素不参与常规样式层叠流程。即使你在 :root 定义了 --thumb-bg: #6a737d，直接在 &::-webkit-scrollbar-thumb { background-color: var(--thumb-bg); } 中引用，也可能被浏览器忽略——尤其当该滚动容器还设置了 scrollbar-width 或 scrollbar-color 等标准属性时，WebKit 会降级处理变量解析逻辑。
确保变量能被 ::-webkit-scrollbar-thumb 正确读取的写法
必须显式将变量“传递”进伪元素作用域，最可靠的方式是：在滚动容器本身（比如 .scroller）上声明变量，并用 inherit 触发继承链，再在伪元素中引用。否则变量值为空或 fallback 不触发。
- 在容器上设置变量：
.scroller { --thumb-bg: #6a737d; --thumb-radius: 2px; } - 伪元素中直接使用：
.scroller::-webkit-scrollbar-thumb { background-color: var(--thumb-bg); border-radius: var(--thumb-radius); } - 避免在
:root定义后跨层级强依赖——::-webkit-scrollbar-thumb不从:root继承变量，它只认父元素（即滚动容器）显式声明的值
和 scrollbar-color 共存时变量失效的典型冲突
如果同时写了 scrollbar-color: var(--thumb-bg) var(--track-bg); 和 ::-webkit-scrollbar-thumb { background-color: var(--thumb-bg); }，Chrome/Edge 可能优先走标准属性路径，导致伪元素规则整体被绕过，变量自然不参与计算。
- 现象：变量在开发者工具里显示为
invalid或直接灰掉 - 解决：删掉或注释掉
scrollbar-color和scrollbar-width，完全交由::-webkit-scrollbar*控制 - 必须共存？那就把
scrollbar-color的值硬编码（如scrollbar-color: #6a737d transparent;），别用var()——标准属性目前不支持变量插值
调试时容易忽略的关键点
变量名拼写一致只是基础；真正卡住人的，往往是作用域和渲染路径的隐式切换。
立即学习“前端免费学习笔记（深入）”；
- 检查开发者工具的
Computed面板里，::-webkit-scrollbar-thumb的background-color是否显示为var(--xxx)字面量（说明未解析），还是已转成具体颜色值（说明成功） - 确认滚动容器没有
overflow: hidden或height: 0等导致伪元素根本无法渲染的布局问题 - Firefox 不支持
::-webkit-scrollbar*，变量在那里必然不生效——别拿 Firefox 去验证 WebKit 专属逻辑
