chrome 和 firefox 滚动条样式必须分开写：firefox 只支持 scrollbar-width（auto/thin/none）和 scrollbar-color（滑块色 轨道色），且仅对 html/body 或 overflow:auto/scroll 容器生效；chrome 必须成套使用 ::-webkit-scrollbar、::-webkit-scrollbar-track、::-webkit-scrollbar-thumb，并确保 width/height、background、border-radius 等关键属性完整，同时开发需运行在 https:// 或 localhost 下。
Chrome 和 Firefox 滚动条样式无法用同一套 CSS 统一控制，必须分开写、分别生效——这不是 bug，是规范差异。
Firefox 只认 scrollbar-width 和 scrollbar-color
它从 64 版本起就完全不解析 ::-webkit-scrollbar，写了也白写，控制台无报错，但样式就是不出现。这两个属性必须成对使用，且只在以下场景生效：
-
html或body元素上（对局部div滚动区无效） - 容器本身设置了
overflow: auto或overflow: scroll -
scrollbar-width只接受auto、thin、none三个值，没有像素级控制 -
scrollbar-color: #666 #eee必须按“滑块色 轨道色”顺序写，第二个值设为transparent会导致轨道不可见但滑块仍可拖，体验断裂
Chrome 必须成套写 ::-webkit-scrollbar 伪元素
漏掉任意一个关键伪元素，整个链式样式就会回退到系统默认。常见失效原因包括：
- 没写
::-webkit-scrollbar自身的width（垂直）或height（水平）——这是起点，缺了后面全不渲染 - 没写
::-webkit-scrollbar-track，尤其在深色背景上，轨道透明会直接“消失” -
::-webkit-scrollbar-thumb没设background，或border-radius超过宽高一半（如width: 6px却设border-radius: 4px） - 父容器用了
overflow: hidden或transform，创建新层叠上下文，把滚动条裁掉了 - 开发时跑在
file://或 HTTP 页面下——Chrome 120+ 会静默禁用::-webkit-scrollbar，必须用https://或localhost（含端口）
Tailwind 用户要特别注意 nocompatible: true
默认的 tailwind-scrollbar 插件只输出 WebKit 规则，对 Firefox 完全跳过。这意味着：
-
scrollbar-none在编译后 CSS 里根本不存在，除非你显式启用兼容模式 - 配置必须写成：
require('tailwind-scrollbar')({ nocompatible: true }) -
scrollbar-thumb-blue-500单独存在不会生成任何规则；必须和scrollbar-track-gray-200同时加在同一个元素上，插件才输出scrollbar-color: #3b82f6 #e5e7eb -
scrollbar-thin在 Firefox 下实际无效（thin不是合法值），等价于没写
iOS Safari 和移动端基本不响应任何滚动条 CSS
这不是遗漏或写法问题，是苹果明确的设计决策：
- iOS Safari（含 iPadOS）无视所有
::-webkit-scrollbar、scrollbar-width、scrollbar-color - Android Chrome 仅部分支持
::-webkit-scrollbar，且要求容器显式设overflow-y: scroll（auto可能被跳过） - Firefox for Android 只响应
html或body上的scrollbar-width和scrollbar-color，局部容器无效 - 移动端没有 hover 状态，
::-webkit-scrollbar-thumb:hover写了也无效
最常被忽略的一点：Win10/Win11 下 Firefox 滚动条视觉差异无法靠 CSS 抹平——这是系统 UI 层行为，不是样式没写对。若强求一致，唯一可靠路径是 scrollbar-width: none 彻底隐藏，再靠 overflow-y: auto 保证滚动能力不受影响。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
