::-webkit-scrollbar 在 Firefox 中不生效，因其是 WebKit/Blink 专属伪元素；Firefox 仅支持 scrollbar-width 和 scrollbar-color，且不支持自定义轨道/滑块样式如圆角、阴影。
Chrome/Firefox/Edge 里 ::-webkit-scrollbar 为啥在 Firefox 不生效
因为 ::-webkit-scrollbar 是 WebKit/Blink 内核专属伪元素，Firefox 完全不识别它——哪怕你写了也毫无反应，控制台也不会报错，纯静默失效。
Firefox 用的是另一套机制：scrollbar-width 和 scrollbar-color 这两个 CSS 属性，且只支持 auto、thin、none 三种值，不支持自定义轨道/滑块颜色以外的样式（比如圆角、阴影、背景图）。
-
scrollbar-width: thin仅在 Firefox 中启用紧凑滚动条，但具体尺寸不可控 -
scrollbar-color: #6c6c6c #f1f1f1第一个值是滑块色，第二个是轨道色，顺序反了就无效 - Edge 96+ 和 Chrome 98+ 已支持
scrollbar-width，但仅限于none或auto，thin仍被忽略
想全局统一滚动条样式，::-webkit-scrollbar + scrollbar-width 怎么配才不翻车
必须分开写，且用 @supports 做安全包裹，否则 Firefox 会把带 ::-webkit-scrollbar 的整条规则块当无效语法跳过，导致后续声明（比如 scrollbar-width）也被连带忽略。
正确写法是把 WebKit 专属样式和 Firefox 专属属性完全隔离，各自用特性检测兜底：
/* Firefox */
@supports (scrollbar-width: thin) {
* {
scrollbar-width: thin;
scrollbar-color: #888 #f5f5f5;
}
}
<p>/<em> Chrome / Edge / Safari </em>/
@supports selector(::-webkit-scrollbar) {
<em>::-webkit-scrollbar {
width: 8px;
}
</em>::-webkit-scrollbar-track {
background: #f5f5f5;
}
*::-webkit-scrollbar-thumb {
background-color: #888;
border-radius: 4px;
}
}</p>
-
@supports selector(...)是目前最稳妥的 WebKit 检测方式，比@supports (-webkit-appearance: none)更精准 - 别对
html或body单独设::-webkit-scrollbar，某些浏览器下会漏掉内部容器的滚动条 -
scrollbar-width: none在 Firefox 中会彻底隐藏滚动条，但拖拽和滚轮仍有效——这点常被误认为“失效”
移动端（iOS Safari / Android Chrome）滚动条能自定义吗
基本不能。iOS Safari 完全不支持 ::-webkit-scrollbar 和 scrollbar-width，Android Chrome 虽然内核支持 ::-webkit-scrollbar，但默认禁用，且用户无法触发显示——滚动条只在滚动瞬间出现，样式修改无效。
- 所谓“iOS 自定义滚动条”实际是用 JS 模拟滚动容器（如
overflow: hidden+transform: translateY），成本高、手势兼容差、影响可访问性 - Android 上部分 WebView（如微信内置）会强制覆盖滚动条样式，CSS 层面无解
- 如果项目必须照顾移动端视觉一致性，优先降级为统一使用默认滚动条，而非强行 hack
scrollbar-color 的颜色值写 transparent 为什么没用
Firefox 明确不支持 transparent 作为 scrollbar-color 的取值，即使语法合法，也会回退到系统默认色，不是变透明，而是“假装没写”。这是规范限制，不是 bug。
- 可用的滑块色只能是不透明的
rgb()、hex、hsl()或命名色（如gray） - 想实现“视觉上隐藏滑块”，只能靠
scrollbar-width: none，或用 JS 动态监听 scroll 事件后临时显隐容器 -
scrollbar-color: #00000000（带 alpha 的 hex）同样被忽略，Firefox 只认 3/6 位 hex 或完整 rgba() 中的不透明版本
实际项目里最常被卡住的，是以为加个 @supports 就万事大吉，结果忘了不同浏览器对同一特性的支持粒度差得远——比如 Chrome 支持 ::-webkit-scrollbar-thumb:hover，Firefox 却连 scrollbar-color 都不许你用变量函数。细节得一个个对浏览器查 MDN 兼容表，没法偷懒。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
