::-webkit-scrollbar 在 firefox 中无效，因其仅支持 webkit/blink 内核浏览器（chrome/edge/safari），firefox 使用 scrollbar-width 和 scrollbar-color；需分别编写两套规则，且 webkit 方案必须包含 ::-webkit-scrollbar、::-webkit-scrollbar-track、::-webkit-scrollbar-thumb 三者才生效。
Chrome/Firefox 中 ::-webkit-scrollbar 为什么没效果
因为 ::-webkit-scrollbar 只在基于 WebKit/Blink 的浏览器（如 Chrome、Edge、Safari）中生效，Firefox 完全不支持该伪元素——它用的是 scrollbar-width 和 scrollbar-color 这两个 CSS 属性。如果你只写了 ::-webkit-scrollbar 规则，Firefox 页面会直接显示默认滚动条，毫无定制痕迹。
实操建议：
- 必须同时写两套规则：一套给 WebKit/Blink，一套给 Firefox
- WebKit 方案需包含至少三个部分：
::-webkit-scrollbar（整体容器）、::-webkit-scrollbar-track（轨道）、::-webkit-scrollbar-thumb（滑块），缺一不可，否则部分浏览器（如旧版 Safari）可能完全不渲染自定义样式 - Firefox 的
scrollbar-width只接受auto、thin、none三个值，无法控制颜色或圆角；颜色只能靠scrollbar-color（前景色+背景色顺序，注意不是“滑块色+轨道色”）
如何让自定义滚动条在 body 和局部容器中都生效
全局滚动条（body）和局部容器（如 div 加了 overflow: auto）的定制方式不同：前者依赖根元素伪类，后者需要显式作用于目标元素。很多人只改了 body::-webkit-scrollbar，结果发现弹窗里的列表还是原生样式。
实操建议：
- 对
body或html设置::-webkit-scrollbar系列规则，仅影响页面主滚动条 - 对任意可滚动容器（如
.sidebar、.modal-content），必须单独为其添加::-webkit-scrollbar规则，且选择器要精确匹配，例如.chat-log::-webkit-scrollbar - Firefox 下，
scrollbar-width和scrollbar-color必须写在可滚动容器上（不能只写在body），否则局部容器仍用系统默认 - 注意层级：如果容器设置了
overscroll-behavior: contain或touch-action: none，可能干扰滚动条触发逻辑，导致样式不显示
scrollbar-width: thin 在 Firefox 中为何有时无效
Firefox 的 scrollbar-width: thin 并非强制变细，而是“提示浏览器尽量使用紧凑样式”，实际是否生效取决于操作系统设置。比如 Windows 上若用户在“设置 > 蓝牙和其他设备 > 鼠标 > 滚动”中启用了“当我指向滚动条时才显示”，那么 thin 就会被忽略，始终显示宽滚动条。
实操建议：
- 不要依赖
thin实现精确宽度控制；如需视觉一致，Webkit 浏览器可用width/height显式设为8px，Firefox 则只能接受系统级妥协 - 测试时务必在真实用户环境检查：关闭开发者工具的模拟器，用真机/真系统验证，特别是 macOS（其滚动条默认隐藏，hover 才出现）
- 若业务强依赖细滚动条，可考虑 JavaScript 方案（如
simplebar），但要注意增加 DOM 节点、影响 focus 管理和键盘导航
移动端 Safari 的滚动条定制限制
iOS/iPadOS 的 Safari 完全不支持 ::-webkit-scrollbar，任何相关 CSS 都会被忽略。这是 WebKit 的主动限制，不是 bug，也无计划开放。
实操建议：
- 别浪费时间调试 iOS 上的
::-webkit-scrollbar样式——它永远不会生效 - 如需统一视觉，只能用 JS 滚动库（如
overlayscrollbars），但要注意：iOS 上 touch 事件穿透、惯性滚动丢失、与position: sticky冲突等问题频发 - 更务实的做法是接受平台差异：在 iOS 上保留原生滚动体验，只在桌面端做定制；可通过
@supports (-webkit-appearance: none)或 UA 检测做渐进增强
真正难的不是写几行 CSS，而是记住哪些规则在哪生效、哪些被系统覆盖、哪些干脆被浏览器无视——尤其当设计稿要求“所有平台滚动条统一为 #6366f1 圆角滑块”时，得先判断这需求在技术上是否成立。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
