纯css变量无法驱动::-webkit-scrollbar伪元素样式，因webkit禁止在伪元素中解析var()；scrollbar-color/width也不支持变量；动态切换需用类名预设规则并js控制，ios safari则完全不支持。
纯 CSS 变量无法直接驱动 ::-webkit-scrollbar 伪元素的样式变化——浏览器不支持在伪元素中使用 var(--color)，所有带变量的声明都会被静默丢弃。
为什么 var(--x) 在 ::-webkit-scrollbar 里完全不生效
WebKit（Chrome/Edge/Safari）明确禁止在伪元素规则中解析 CSS 自定义属性。哪怕你写了 ::-webkit-scrollbar-thumb { background: var(--thumb-color); }，浏览器也会当作无效值跳过，回退到默认色或上一条有效声明。
- 这不是兼容性问题，而是规范限制：CSS Custom Properties spec 明确指出，伪元素不参与自定义属性继承链
-
scrollbar-color和scrollbar-width这两个标准属性也**不接受变量**，写scrollbar-color: var(--thumb) var(--track)等同于没写 - 试图用
:root切换变量再指望滚动条重绘？不行——伪元素样式不会响应变量变更而重计算
真正能动态切换滚动条样式的可行路径
必须绕过伪元素的硬限制，用“类名切换 + 预设规则”代替变量注入。
- 为每种主题/状态预定义完整的一套
::-webkit-scrollbar规则，例如.theme-dark::-webkit-scrollbar-thumb和.theme-light::-webkit-scrollbar-thumb - 用 JS 控制元素 class：
document.body.classList.toggle('theme-dark')，触发对应伪元素规则生效 - Firefox 侧需同步操作
scrollbar-color：它只认html或body上的声明，所以 class 要加在上才保险 - 注意 iOS Safari 完全无视所有滚动条样式，这类动态切换在 iPhone/iPad 上根本不会渲染，别把它当测试依据
想局部控制某个容器的滚动条？前缀必须精准匹配
如果目标是 <div class="chat-log">，那 CSS 必须写成 <code>.chat-log::-webkit-scrollbar，漏掉 .chat-log 前缀就变成全局规则，可能污染其他区域。
- 该容器必须有明确的
overflow-y: auto（或scroll），且内容实际溢出——否则伪元素无渲染上下文 -
scrollbar-color在 Firefox 中对局部容器无效，它只响应html或body的声明，局部定制只能靠 JS 模拟滚动或放弃 Firefox 样式 - 不要给
::-webkit-scrollbar-thumb设太小的height或width：WebKit 对滑块有最小渲染尺寸下限（通常 ≥ 40px 高度才稳定显示），设height: 6px很可能直接不可见
滚动条样式动态化本质是“有限状态切换”，不是实时响应式计算。把变量思维换成 class 状态管理，才能避开浏览器引擎的底层限制。iOS 和 Firefox 的断层支持，得提前在方案里画清边界，而不是后期补 hack。
