Firefox 的 scrollbar-width 和 scrollbar-color 仅对设置了 overflow-y 且有明确高度的可滚动容器生效，不支持 body 全局设置；WebKit 内核需用 ::-webkit-scrollbar 四件套，iOS Safari 完全忽略滚动条样式。
Firefox 的 scrollbar-width 和 scrollbar-color 必须单独写，且只对可滚动容器生效
Firefox 64+ 才支持 scrollbar-width 和 scrollbar-color，这两个属性不认 ::-webkit-scrollbar，也不能写在 html 或 body 上试图“全局隐藏”。
它们只对设置了 overflow-y: auto 或 overflow-y: scroll 的块级元素起作用，而且该元素必须有明确的 height 或 max-height——否则根本不会触发滚动，也就没有滚动条可控制。
常见错误：写了 scrollbar-width: none 但没生效，大概率是容器高度不够或 overflow 没设对。
-
scrollbar-width只能取auto、thin、none，写成hidden或0就失效 -
scrollbar-color格式为scrollbar-color: <thumb> <track>，顺序不能反；只影响颜色，不控制宽高 - 对
textarea或自定义div滚动区有效，但对body滚动无效（Firefox 不允许样式化根滚动）
Chrome / Edge / Safari（桌面）必须用 ::-webkit-scrollbar 系列伪元素，漏一个就回退
::-webkit-scrollbar 是 WebKit/Blink 内核唯一可靠路径，但它不是单个规则，而是一套必须共存的四件套：::-webkit-scrollbar（容器）、::-webkit-scrollbar-track（轨道）、::-webkit-scrollbar-thumb（滑块）、::-webkit-scrollbar-corner（右下角交汇处）。漏掉 ::-webkit-scrollbar-corner，旧版 Safari 会显示白块；漏掉 track 或 thumb，某些 Edge 版本直接回退到默认灰色滑块。
- 不要用
display: none隐藏滚动条——部分 macOS 14+ 和 iOS 17+ Safari 会忽略它；改用width: 0; height: 0; background: transparent; -
::-webkit-scrollbar必须写在<style>块或外部 CSS 文件里，内联样式（）完全不生效 - Safari 16.4+ 开始支持标准伪类
::scrollbar-thumb，但兼容性仍弱，目前仍应以::-webkit-scrollbar为主力
iOS Safari 不吃任何 CSS 滚动条样式，这不是 bug，是设计
iOS Safari（截至 2026 年 7 月）完全忽略 ::-webkit-scrollbar 和 scrollbar-width，它默认就不渲染可见滚动条——用户拖动时只有轻微阴影反馈，松手即消失。你写的任何样式都不会出现，也不报错，DevTools 里也查不到伪元素渲染痕迹。
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 别为 iOS 写滚动条样式，更别加
@supports检测——检测结果永远是 false，徒增冗余代码 - 如果 UI 要求“iOS 上也显式指示可滚动”，得靠 JS 在容器边缘加视觉提示（比如渐隐遮罩、箭头图标），而非依赖滚动条本身
- 测试时务必用真机，模拟器有时会误报样式生效
别碰 overflow: hidden，它禁用滚动，不是隐藏滚动条
这是最常被误用的点：overflow: hidden 会让内容被裁剪，同时彻底关闭鼠标滚轮、方向键、触控板拖拽等所有滚动能力。所谓“隐藏但保留功能”的方案，全部建立在 overflow: auto 或 overflow: scroll 的基础上——删掉它，CSS 隐藏规则就失去作用对象。
立即学习“前端免费学习笔记（深入）”；
- 父容器用了
overflow: hidden，子容器即使写了完整::-webkit-scrollbar规则，也可能因渲染链被截断而失效 - 想让滚动“静默”（无滚动条但可滚），Firefox 用
scrollbar-width: none，WebKit 用::-webkit-scrollbar { width: 0; height: 0; }，两者都必须配合overflow: auto - 某些 UI 框架（如 Ant Design）或 CSS 重置库会主动把
::-webkit-scrollbar设为display: none，必要时得用!important覆盖（虽不优雅，但有时绕不开）
overflow 值的双重依赖——它不像 Chrome 那样“宽容”，少写一行 max-height 或错写成 overflow: visible，整个隐藏逻辑就失效了。 
