必须分浏览器隔离写法：firefox仅支持scrollbar-width和scrollbar-color（顺序固定、值受限），chrome/edge/safari需用@supports selector(::-webkit-scrollbar)包裹::-webkit-scrollbar系列规则，ios safari完全不支持；混写会导致firefox静默丢弃整条规则。
没有“一套写法通吃 Firefox 和 Chrome”的方案，只有分浏览器、分能力、分场景的隔离写法。直接混写 ::-webkit-scrollbar 和 scrollbar-width 会导致 Firefox 静默跳过整条规则——连带后面的 scrollbar-color 也失效。
@supports 必须用，且要分开包裹
Firefox 不认识 ::-webkit-scrollbar，遇到就整条 CSS 规则块丢弃；Chrome 也不理解 scrollbar-width 的语义（虽部分版本能解析，但行为不一致）。所以不能写在一个 {} 里。
-
@supports (scrollbar-width: thin)只包裹 Firefox 专属声明，比如scrollbar-width和scrollbar-color -
@supports selector(::-webkit-scrollbar)包裹 WebKit/Blink 专属样式（Chrome/Edge/Safari），这是目前最准的检测方式，比@supports (-webkit-appearance: none)更可靠 - 别用
@supports (scrollbar-color: #888 #f5f5f5)—— Firefox 虽支持该属性，但该检测在旧版 Edge 中会误判为 true
scrollbar-color 的顺序和取值限制很硬
scrollbar-color 在 Firefox 中只接受两个纯色值，且顺序固定：第一个是滑块色，第二个是轨道色。写反了就完全无效，也不会报错。
- 允许写法：
scrollbar-color: #6c6c6c #f1f1f1 - 禁止写法：
scrollbar-color: rgba(0,0,0,0.5) #fff（透明度被忽略）、scrollbar-color: #f1f1f1 #6c6c6c（顺序反了，滑块变透明） -
scrollbar-width只有三个值：auto、thin、none，不能写12px或small - 设
scrollbar-width: none后滚动仍可用（滚轮、拖拽、键盘方向键都有效），只是视觉隐藏——这点常被当成“失效”
::-webkit-scrollbar 的坑比想象中多
Chrome 120+ 开始，在非安全上下文（file://、HTTP 页面、未配 HTTPS 的 http://dev.example.com）下会静默禁用 ::-webkit-scrollbar 样式，控制台零提示。
- 开发时务必用
https://localhost或http://localhost:3000启服务，否则样式白写 -
::-webkit-scrollbar-thumb中避免box-shadow、filter、background-image，这些触发重绘，滚动卡顿明显 - 移动端 iOS Safari 完全不响应
::-webkit-scrollbar，Android Chrome 默认禁用且用户无法唤出——别对响应式容器默认启用 -
border-radius: 999px比4px更稳妥，因为滑块高度随内容动态变化，固定值易被裁切
真正需要强一致体验时，JS 方案不是备选，而是必选
如果你的项目要求“所有浏览器滚动条外观、交互、尺寸、hover 效果完全一致”，比如金融后台、设计系统文档站、或交付给甲方的定制管理平台，那 CSS 原生方案已到极限。
此时 perfect-scrollbar 这类库不是“过度设计”，而是唯一能绕过内核差异的路径——它用 div 模拟滚动条，接管事件流，代价是额外 JS 体积和轻微滚动延迟。别指望靠加几十行 CSS 就让 Firefox 和 Chrome 渲染出一模一样的圆角滑块加 hover 渐变。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
