firefox仅支持scrollbar-color和scrollbar-width，需成对使用且作用于有overflow的容器；chrome/edge/safari须用::-webkit-scrollbar伪元素，二者不可混用同一容器。
body上写::-webkit-scrollbar为什么没反应
因为浏览器根本不认——::-webkit-scrollbar只对「实际发生滚动的块级容器」生效，不是全局样式，也不继承。直接挂body或html上，除非你显式设置了body { overflow-y: scroll; }，否则它压根不会触发。
更稳妥的做法是：用一个包裹容器（比如.main-content），设height: 100vh; overflow-y: auto;，再把所有::-webkit-scrollbar规则全写在.main-content::-webkit-scrollbar下。
-
::-webkit-scrollbar-track必须设background，否则轨道透明，和页面底色打架 -
::-webkit-scrollbar-thumb必须设background，否则滑块不可见 - 漏掉
track或thumb中任意一个，Chrome/Edge 就可能整个回退到默认样式，不是“部分生效”
Firefox 滚动条颜色怎么配得上
Firefox 完全无视::-webkit-scrollbar系列，只认两个属性：scrollbar-width和scrollbar-color，而且只对有overflow的根级容器（如html或.scroll-container）有效。
scrollbar-color格式固定：scrollbar-color: <thumb-color><track-color></track-color></thumb-color>，顺序反了就失效；track-color设transparent会导致轨道视觉消失（不推荐）。
-
scrollbar-width只接受auto、thin、none；设thick或12px会被忽略 -
scrollbar-width: thin是scrollbar-color生效的前提，单独写颜色无效 - 别写
::-moz-scrollbar——这个伪类早已废弃，无任何效果
滑块加阴影和圆角要注意什么
用box-shadow: inset 0 0 6px rgba(0,0,0,0.2)给::-webkit-scrollbar-thumb加内阴影，确实能增强立体感，但有硬性限制：
-
border-radius不能超过滑块高度的一半（比如height是 8px，border-radius最多设 4px） - 移动端没有
:hover，所以::-webkit-scrollbar-thumb:hover在手机上不触发 -
::-webkit-scrollbar里设width: 4px会被浏览器强制拉高，建议控制在 8–12px 区间
要不要用 SimpleBar 这类 JS 库
要看设计要求是否「强一致」：如果滚动条必须在 Chrome、Firefox、Safari 甚至旧版 Edge 中都保持完全相同的宽度、颜色、圆角、悬停反馈，原生 CSS 做不到，必须用 JS 库接管。
SimpleBar 是轻量选择（gzip 后约 3.5KB），自动处理 RTL、触摸事件、滚动惯性，且不劫持原生滚动行为（仍走scroll事件），比 Perfect Scrollbar 更现代。
- 代价是增加 JS 执行开销，首次渲染略慢
- 若只是品牌色微调+基础圆角，原生方案更干净，也更利于 SSR
- 真正容易被忽略的是：macOS Safari 上
overscroll-behavior: contain可能干扰原生回弹手势，要实测
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
