Firefox仅支持scrollbar-width和scrollbar-color，WebKit系浏览器依赖::-webkit-scrollbar伪元素；需并行书写两套规则、分别生效、互不干扰，且注意作用域、尺寸保守性、主题适配与移动端兼容性。
做不到完全统一，但能用两套规则让视觉效果高度接近——关键不是“写一次通吃”，而是分别写、各自生效、互不干扰。
Firefox 只认 scrollbar-width 和 scrollbar-color 两个属性
Firefox 不解析任何 ::-webkit-scrollbar 伪元素，写了也白写，它只会静默跳过。你不能给滑块加 border-radius、transition 或渐变，也不能控制轨道厚度或按钮样式。
-
scrollbar-width只接受auto、thin、none三个值；thin是唯一能让滚动条变细的选项 -
scrollbar-color必须写成scrollbar-color: <thumb-color><track-color></track-color></thumb-color>，顺序不能反，也不支持透明度或函数值（如rgba()） - 如果设了
scrollbar-color: #6c63ff #f5f5f5，Firefox 就只渲染这个配色，其他 WebKit 规则全被忽略
WebKit 浏览器靠 ::-webkit-scrollbar 系列伪元素精细控制
Chrome、Edge（Chromium）、Safari 都走这套逻辑，可控制滑块、轨道、角落、按钮等全部部件，但必须满足一个前提：容器得真正触发滚动（overflow: auto 或 scroll，且内容超出尺寸）。
-
::-webkit-scrollbar控制整体尺寸：width影响垂直滚动条宽度，height影响水平滚动条高度（仅当overflow-x: auto生效时才起作用） -
::-webkit-scrollbar-thumb最小建议宽度设为6px，否则在高 DPI 屏幕或缩放比例下可能不可见 -
::-webkit-scrollbar-track是滑块背后的“底板”，不是整个背景；若设background: transparent，又没给父容器配色，轨道会透出页面底色 - 某些 UI 框架（如 Ant Design）或重置 CSS（如 Normalize.css）会把
::-webkit-scrollbar设为display: none，必要时得用!important覆盖（虽不优雅，但有效）
并行书写 + 合理兜底，才是真实项目能跑通的写法
不要试图用 @supports 去“条件加载”，因为 Firefox 和 Chrome 对彼此的语法根本无感——直接叠写最稳。重点是把作用域收窄、尺寸设保守、颜色做明暗适配。
立即学习“前端免费学习笔记（深入）”；
- 全局样式别只写
body { scrollbar-color: ... }，要带上html并确保html, body { min-height: 100%; }，否则 SPA 路由切换后html高度塌陷，滚动条样式就丢了 - 局部滚动容器（如
.table-wrapper）必须单独声明两套规则，避免被父级样式污染 - 深色模式下，
scrollbar-color的两个值要随主题切换，不能硬编码；可用 CSS 自定义属性配合@media (prefers-color-scheme: dark)动态赋值 - 移动端 Safari（iOS 16+）才开始有限支持
::-webkit-scrollbar，iOS 15 及更早版本完全不渲染，别把它当交互依赖项
真正难的不是写对语法，而是滚动条样式在动态内容加载、路由跳转、主题切换、缩放变化这些场景下保持稳定——它不像普通组件那样有明确生命周期，容易在你没注意的时候悄悄失效。
