::-webkit-scrollbar 仅在 webkit 内核浏览器（chrome、edge、safari）中生效，firefox 完全不识别；firefox 仅支持 scrollbar-width 和 scrollbar-color 两个标准属性，功能有限；真正跨浏览器定制需用 javascript 库如 simplebar。
Chrome/Firefox 中用 ::-webkit-scrollbar 仅对 WebKit 内核生效
这不是标准 CSS，而是 WebKit（Chrome、Edge、Safari）私有伪元素。Firefox 完全不识别 ::-webkit-scrollbar，直接忽略；即使加了也不会报错，但样式完全无效。所以别指望一套代码跨浏览器生效。
常见错误是把 ::-webkit-scrollbar 当成通用方案，结果在 Firefox 或新版 Safari（某些版本限制更严）里滚动条原样不动。它只控制“外观”，不影响滚动行为或可访问性。
-
::-webkit-scrollbar控制整个滚动条轨道 -
::-webkit-scrollbar-thumb控制拖动块（必须设background，否则透明不可见） - 必须给
thumb设border-radius才能变圆角，不然默认是矩形+硬边 - 若容器没设
overflow: auto或scroll，伪元素不触发渲染
Firefox 滚动条样式只能靠 scrollbar-width 和 scrollbar-color
Firefox 提供两个标准属性，但能力极有限：只能调宽度和颜色，不能改形状、阴影、hover 效果，也不能单独控制 thumb 或 track 的尺寸。
例如：scrollbar-width: thin 在 Firefox 中让滚动条变窄（类似 macOS 隐藏式），但 Windows 下效果不稳定；scrollbar-color: #6c6c6c #f0f0f0 设 thumb 色和 track 色——顺序不能反，第一个是拖动块，第二个是轨道背景。
- 这两个属性对 Chrome/Edge 无影响，可安全共存
-
scrollbar-width只接受auto/thin/none，没有像素值 - 若设了
scrollbar-color但没设scrollbar-width，Firefox 仍用默认宽度
真正跨浏览器一致的滚动条定制得用 JavaScript 库
比如 simplebar 或 overlay-scrollbars。它们不是“美化原生滚动条”，而是隐藏原生条，用 div + CSS + JS 重写一套可完全控制的滚动逻辑。
好处是样式彻底自由：圆角、渐变、hover 缩放、自定义宽度、甚至加图标。坏处是 DOM 结构变复杂，可能影响焦点管理、屏幕阅读器兼容性，且需额外加载脚本。
-
simplebar会包裹目标元素，生成.simplebar-content和.simplebar-scrollbar等结构，需重写对应 CSS - 务必在初始化前确保容器有明确高度或
max-height，否则 JS 无法计算滚动范围 - 若页面用
position: fixed元素遮挡滚动区域，可能干扰库的事件监听
移动端 iOS/Android 上几乎无法可靠定制原生滚动条
iOS Safari 对 ::-webkit-scrollbar 支持极差，多数版本直接忽略；Android Chrome 虽支持，但常因系统 UI 覆盖而显示异常。用户手势滚动优先级远高于 CSS 样式，强行覆盖易导致卡顿或响应延迟。
实际项目中，除非是桌面端管理后台这类强交互场景，否则建议放弃移动端滚动条定制。保留原生表现反而更稳定、更符合用户直觉。
真要统一体验，不如在移动端用按钮+JS 模拟滚动，或直接禁用自定义、用 overflow: auto 交由系统处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
