::-webkit-scrollbar在firefox中无反应，因其是webkit/blink私有伪元素，gecko引擎直接忽略；需用@supports分别隔离书写scrollbar-width/thin和scrollbar-color，且ios safari基本不支持自定义。
没有“修复”这回事，只有分层适配——WebKit/Blink 用 ::-webkit-scrollbar，Firefox 用 scrollbar-width 和 scrollbar-color，iOS Safari 基本放弃样式控制。
为什么 ::-webkit-scrollbar 在 Firefox 里完全没反应？
这不是 bug，是内核设计决定的：::-webkit-scrollbar 是 WebKit/Blink 私有伪元素，Gecko（Firefox）压根不解析它——写了也不报错、不警告，直接静默跳过。Edge 96+ 虽属 Blink，但对 scrollbar-width: thin 的支持仍不稳定，常回退到 auto。
实操建议：
-
::-webkit-scrollbar必须配套声明width或height（单位只能是px或rem），否则滑块尺寸为 0，不可见 - 别把
::-webkit-scrollbar-thumb单独写，必须先定义::-webkit-scrollbar容器 - Firefox 中想让滚动条变细，只能靠
scrollbar-width: thin；改颜色只认scrollbar-color: #888 #f5f5f5，顺序不能反，且不支持圆角、阴影、hover
如何安全地同时写 WebKit 和 Firefox 样式？
关键在隔离 + 特性检测。同一规则块里混写 ::-webkit-scrollbar 和 scrollbar-width，Firefox 会因不认识前者而跳过整条规则——连带后面的 scrollbar-width 也失效。
实操建议：
- Firefox 专属样式用
@supports (scrollbar-width: thin)包裹 - WebKit 专属样式用
@supports selector(::-webkit-scrollbar)包裹（注意：Safari 16.4+ 才稳定支持该检测） -
::-webkit-scrollbar里禁用 CSS 变量和calc()，所有宽高、颜色必须写死值 - iOS Safari 对
::-webkit-scrollbar-thumb:hover支持极差，建议直接省略 hover 状态
Chrome 120+ 下 ::-webkit-scrollbar 突然失效怎么办？
本地开发最常踩的坑：Chrome 120+ 默认禁用非安全上下文下的滚动条自定义。也就是说，file:// 协议、HTTP 页面、甚至未配 HTTPS 的 http://dev.example.com 都会被拦截——样式被静默丢弃，控制台无提示。
实操建议：
- 只在
https://或localhost（含端口，如localhost:3000）下调试 - 检查父容器是否设置了
overflow: hidden或transform，这两者会创建新层叠上下文，导致滚动条被裁剪或不可见 - 避免在
::-webkit-scrollbar-thumb中使用box-shadow、filter或background-image，这些会触发高频重绘，造成滚动卡顿
scrollbar-gutter: stable 为什么写了还跳？
scrollbar-gutter 写在 body 或 div 上完全无效——它只对根滚动容器生效，也就是必须作用于 html 元素。
实操建议：
- 必须写成：
html { scrollbar-gutter: stable; overflow-y: auto; } -
overflow-y: auto是必要搭档，只写scrollbar-gutter不会触发预留逻辑 - 用
@supports (scrollbar-gutter: stable)做渐进增强，fallback 用html { overflow-y: scroll; } - Bootstrap Modal 打开时仍跳动？它的 JS 会强制加
padding-right，需覆盖：body.modal-open { padding-right: 0 !important; }
真正难的不是写出样式，而是判断哪些地方必须妥协、哪些地方值得用 JS 补位——比如金融后台要求强一致体验，那 perfect-scrollbar 就不是“可选”，而是必选项。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
