firefox仅支持scrollbar-width和scrollbar-color两个标准属性，需成对使用且作用于实际可滚动容器；tailwind需配置{nocompatible: true}才生成对应规则，单独scrollbar-thumb类无效。
Firefox 不认 ::-webkit-scrollbar，得换属性
写了 ::-webkit-scrollbar 却没反应？不是代码错，是 Firefox 根本不解析这个伪元素。它只认两个标准 CSS 属性：scrollbar-width 和 scrollbar-color。Chrome/Safari 用前者，Firefox 用后者，二者互不识别、也不报错，只是静默跳过。
所以别指望把 WebKit 规则复制粘贴到 Firefox 里生效。要让滚动条在 Firefox 中有响应，必须显式写：
-
scrollbar-width: auto | thin | none（仅这三个值合法） -
scrollbar-color: <thumb-color><track-color></track-color></thumb-color>（必须成对，缺一不可）
例如：.list { scrollbar-width: thin; scrollbar-color: #666 #f0f0f0; }
Tailwind Scrollbar 插件默认不生成 Firefox 规则
如果你用的是 tailwind-scrollbar，默认行为是“兼容优先”——只给 Chrome/Safari 输出 ::-webkit-scrollbar 相关类，对 Firefox 完全跳过。你在 HTML 里写了 scrollbar-none 或 scrollbar-thumb-blue-500，编译后的 CSS 文件里根本查不到对应规则。
修复方法：必须在 tailwind.config.js 的 plugins 数组中显式开启非兼容模式：
require('tailwind-scrollbar')({ nocompatible: true })
只写 require('tailwind-scrollbar') 是无效的。开启后，scrollbar-none 才会编译为 scrollbar-width: none，scrollbar-thumb- 类才可能触发 scrollbar-color 输出。
⚠️ 注意：scrollbar-thumb-blue-500 单独使用在 Firefox 下仍无效——插件只在同时存在 scrollbar-thumb- 和 scrollbar-track- 时才输出完整 scrollbar-color 声明。
样式不生效？先确认滚动上下文是否成立
即使属性写对了，Firefox 也不会渲染滚动条样式，除非满足三个硬性条件：
- 容器设置了
overflow-y: auto或overflow-y: scroll（不能是hidden或visible） - 容器有明确的
height或max-height（height: auto或未设高度 → 不触发滚动 → 样式无作用对象） - 内部内容真实溢出（光有 overflow 不够，得真超出去）
常见失效场景：Flex 子项没撑开父容器、Ant Design 等组件库重置了 overflow、父级设了 overflow: hidden 导致子滚动条被裁掉。
iOS Safari 和旧版浏览器基本没法靠 CSS 自定义
iOS Safari（包括 iPadOS）自 16.4 起才部分支持 ::-webkit-scrollbar，且仅限于 overflow: scroll 的局部容器；body 和 html 上的规则全部无视。更关键的是：它默认隐藏滚动条，只在用户拖拽时短暂浮现——你写的 thumb 样式根本没机会展示。
Firefox 97+ 支持 scrollbar-color，但能力极弱：不支持圆角、边框、hover 动效，也不能设像素宽度。想在 Firefox 里做出 Chrome 那种细长圆角滑块？做不到。能做的只有基础配色 + 显隐控制。
真正跨平台统一外观的方案，目前只有 JS 滚动库（如 simplebar 或 overlay-scrollbars）。纯 CSS 方案注定是“分而治之”：WebKit 一套，Firefox 一套，iOS 则基本放弃。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
