scrollbar-color仅Firefox原生支持，Chrome/Edge需用::-webkit-scrollbar；其值为滑块色和轨道色，顺序不可颠倒，且不能被WebKit伪元素覆盖。
scrollbar-color 不起作用？检查是否用了伪元素覆盖
很多情况下 scrollbar-color 看似没生效，其实是被 ::-webkit-scrollbar 相关规则强行覆盖了。Firefox 支持 scrollbar-color，但 Chrome/Edge 只认 WebKit 伪元素；一旦你写了 ::-webkit-scrollbar-track 或类似规则，哪怕只是空声明，WebKit 内核浏览器就会彻底忽略 scrollbar-color。
- 只在 Firefox 中生效：确保没写任何
::-webkit-scrollbar开头的 CSS - 想跨浏览器统一控制？别混用——要么全用
scrollbar-color+scrollbar-width（仅 Firefox），要么全用::-webkit-scrollbar（Chrome/Edge/Safari） -
scrollbar-color必须写在可滚动容器上，比如div、body，不能只写在父级不滚动的元素上
scrollbar-color 的两个值分别控制什么
scrollbar-color 接收两个颜色值：scrollbar-color: <thumb-color><track-color>;</track-color></thumb-color>。第一个是滑块（thumb）颜色，第二个是轨道（track）背景色。顺序反了就无效，而且不支持透明色或渐变——transparent 会被当作无效值降级为系统默认。
- 常见错误：写成
scrollbar-color: #666 #eee;却发现滑块还是灰色——检查是否被::-webkit-scrollbar-thumb覆盖了 - 不支持
currentcolor或变量（如var(--primary)），必须是明确的颜色关键字、十六进制、rgb() 等 - 如果轨道色设为和背景色一致（比如白色页面设
#fff），滑块可能难以辨识，这不是 bug，是设计使然
Firefox 下滚动条宽度不可调？用 scrollbar-width 配合
scrollbar-width 是 Firefox 专属属性，和 scrollbar-color 搭配使用。它只有三个关键字值：auto、thin、none。注意：thin 并非像素级可控，而是由 Firefox 自行决定一个“较窄”的尺寸，且仅对 overlay scrollbar 生效（即不占布局空间的那种）。
-
scrollbar-width: none;会隐藏滚动条，但内容仍可滚动——适合做“隐藏式滚动”交互 - 设为
thin后，scrollbar-color依然有效，但滑块会更细，轨道区域视觉占比变小 - 不要试图用
width或height直接改::-webkit-scrollbar的尺寸来模拟——那属于另一套机制，和scrollbar-width无关
兼容性差是硬伤，别指望单靠这个做全局定制
目前只有 Firefox 原生支持 scrollbar-color 和 scrollbar-width。Chrome 113+ 开始实验性支持 scrollbar-color，但需开启 flag（chrome://flags/#enable-scroll-customization），且未正式落地。Safari 完全不支持。
立即学习“前端免费学习笔记（深入）”；
- 生产环境若需稳定定制滚动条，仍得回归
::-webkit-scrollbar+ JS 模拟（如simplebar库） - 用
@supports (scrollbar-color: auto)做特性检测是可行的，但别把它当兜底方案——检测到不支持时，你大概率还得另写一套 WebKit 规则 - 移动端（尤其是 iOS Safari）完全无视这些 CSS 属性，滚动条本身就不显示，谈不上定制
真正麻烦的不是怎么写对，而是得时刻记住：这组属性只在 Firefox 里安静工作，其他地方它连报错都不会有，就默默失效。
