用CSS变量统一管理滚动条样式，需在:root定义--scroll-thumb-color等变量并在::-webkit-scrollbar伪元素中引用，Firefox的scrollbar-color需按“滑块色 轨道色”顺序使用变量且避免无效值，配合prefers-color-scheme实现主题切换，注意移动端Safari不支持自定义滚动条。
怎么用CSS变量统一管理滚动条颜色和尺寸
直接在::-webkit-scrollbar-thumb里写死#666或12px会导致改一处样式就得全局搜索替换。用CSS变量就能把颜色、宽度、圆角这些值集中定义，改一个地方全链路生效。
实操建议：
- 在
:root里定义变量，比如--scroll-thumb-color: #666;、--scroll-track-bg: #f5f5f5;、--scroll-width: 10px; - 所有
::-webkit-scrollbar相关伪元素都用var(--scroll-thumb-color)引用，别漏掉::-webkit-scrollbar-thumb:hover和::-webkit-scrollbar-track - Firefox的
scrollbar-color不支持变量，得用var(--scroll-thumb-color) var(--scroll-track-bg)拼接，注意顺序不能反（滑块色在前，轨道色在后） - 变量名别用
scrollbar-前缀——某些浏览器会把它当成原生属性解析而报错
为什么scrollbar-color里用CSS变量会失效
Firefox的scrollbar-color接受两个颜色值，但它对CSS变量的支持很脆弱：如果变量没被正确继承、或变量值带单位（比如var(--scroll-thumb-color) px）、或变量本身是transparent，整个声明就会被忽略，回退到系统默认样式。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
-
scrollbar-color: var(--thumb) var(--track);写了但滚动条颜色没变——检查computed面板，看该属性是否显示为invalid - 变量定义在某个class里（如
.dark-theme { --thumb: #333; }），但scrollbar-color写在body上，没继承到变量值 - 用了
!important覆盖变量，反而让Firefox拒绝解析整条声明
如何让深色/浅色主题自动切换滚动条样式
靠@media (prefers-color-scheme: dark)配合CSS变量最稳妥，比JS监听更轻量、更早生效。
使用场景：
- 在
:root里设默认浅色变量，再用媒体查询重定义深色变量 -
scrollbar-width: thin;这种非颜色属性不用重复写，它本身不依赖主题 - 移动端Safari完全不支持
::-webkit-scrollbar，所以即使变量生效，iOS上也看不到自定义效果——这点容易被忽略 - 如果项目用CSS-in-JS（如Emotion），确保变量注入时机早于滚动条样式规则，否则首次渲染时可能闪一下默认样式
滚动条样式变量化后，scrollTop异常怎么办
变量本身不影响滚动行为，但常因配套改动引发问题：比如为了适配深色主题，顺手给滚动容器加了background: var(--bg);，结果overflow: auto失效；或者把--scroll-width设成0导致滚动条消失但内容仍溢出。
排查要点：
- 检查容器是否仍有明确高度（
height或max-height），变量改了但容器高度塌陷就根本不会触发滚动 - 确认
overflow-y没被变量覆盖——比如写了overflow-y: var(--overflow-y, auto);但--overflow-y没定义 - Chrome DevTools里看
Computed面板，过滤scroll，确认overflow、height、scrollbar-width最终值是否符合预期
