firefox中scrollbar-width与scrollbar-color必须成对且顺序正确才生效；chrome/safari需用::-webkit-scrollbar系列伪元素；两套方案可安全共存，无需js检测。
Firefox 里 scrollbar-width 和 scrollbar-color 必须成对出现
单独写 scrollbar-color: #6c757d #f8f9fa 或只设 scrollbar-width: thin，Firefox 都会静默忽略整条声明——不是颜色没变，是压根不生效。必须同时存在，且顺序不能颠倒：scrollbar-color 第一个值是滑块（thumb），第二个是轨道（track）；scrollbar-width 只接受 auto、thin、none 三选一，不能带单位或 px。
常见错误包括：
-
scrollbar-color: #6c757d;—— 少一个轨道色，整行失效 -
scrollbar-color: rgba(108, 117, 125, 0.8) #f8f9fa;—— Firefox 不支持 alpha 通道，退回到默认灰色滑块 - 轨道色和容器背景色太接近（比如都用
#ffffff），滑块视觉上“消失”，但其实仍可拖动
Chrome/Safari/Edge 必须用 ::-webkit-scrollbar 系列伪元素
scrollbar-color 和 scrollbar-width 在这些浏览器里完全被无视，写了也不报错，但开发者工具里直接标为“invalid”。真正起作用的是 ::-webkit-scrollbar 及其子伪元素，而且漏掉任一环节就可能让滚动条不可见。
关键点：
-
::-webkit-scrollbar控制宽度/高度，必须设width（纵向）或height（横向），否则滚动条可能塌缩 -
::-webkit-scrollbar-track设轨道背景，不设的话默认透明，容易和内容重叠 -
::-webkit-scrollbar-thumb设滑块，建议加border-radius和background，否则看起来像一根直棍 - 伪元素只作用于**实际触发滚动的元素本身**，比如
.modal-body { overflow-y: auto; }，就要写.modal-body::-webkit-scrollbar，而不是父容器
怎么让两套方案共存又不互相覆盖？
可以放心叠加写，浏览器各取所需：Firefox 读 scrollbar-width/scrollbar-color，WebKit 内核浏览器读 ::-webkit-scrollbar。但要注意选择器优先级和作用范围一致。
推荐写法：
/* 同时作用于 body 和自定义滚动容器 */<br>.custom-scroll,<br>body {<br> scrollbar-width: thin;<br> scrollbar-color: #81ecec #f7f9fc;<br>}<br><br>.custom-scroll::-webkit-scrollbar,<br>body::-webkit-scrollbar {<br> width: 8px;<br>}<br><br>.custom-scroll::-webkit-scrollbar-track,<br>body::-webkit-scrollbar-track {<br> background: #f7f9fc;<br>}<br><br>.custom-scroll::-webkit-scrollbar-thumb,<br>body::-webkit-scrollbar-thumb {<br> background: #81ecec;<br> border-radius: 4px;<br>}
注意：不要给 ::-webkit-scrollbar-track 加 border 或过细的 box-shadow，在高缩放或 Retina 屏下容易糊边或闪烁。
为什么 macOS 上 thin 滚动条经常不显示？
macOS 系统设置里有个“仅当滚动时显示滚动条”，如果用户开了这个选项，scrollbar-width: thin 在 Firefox 中就只在滚动瞬间出现——不是你代码错了，是系统策略压过了 CSS 建议。Windows 下则基本无视 scrollbar-width，始终显示默认宽度。
所以真正可控的只有两件事：
- Firefox：靠
scrollbar-color确保滑块/轨道色可区分，靠scrollbar-width: thin“建议”窄一点（但不保证） - Chrome/Safari：靠
::-webkit-scrollbar的width精确控制像素级宽度，这是唯一能落地的手段
别试图用 JS 动态检测滚动条宽度再适配——不同系统、不同缩放、不同浏览器渲染逻辑差异太大，稳定性和维护成本远高于直接写两套 CSS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
