必须同时写 scrollbar-width: none（firefox）和 ::-webkit-scrollbar { width: 0; height: 0; }（chrome/safari/edge），缺一不可；firefox 需容器有 height/max-height 且 overflow-y 为 auto/scroll 才生效，webkit 方案须完整声明 track/thumb 且不可内联，ios safari 原生不显示滚动条无需适配。
直接给结论：必须同时写 scrollbar-width: none（Firefox）和 ::-webkit-scrollbar { width: 0; height: 0; }（Chrome/Safari/Edge），缺一不可；-ms-overflow-style: none 可省略，除非还要支持 IE 或旧版 EdgeHTML。
Firefox 里 scrollbar-width: none 不生效？检查 overflow 和高度
这个属性只在 Firefox 64+ 生效，且完全无视其他浏览器。但它不是“开关”，而是“视觉开关”——前提是滚动行为本身得存在。
- 容器必须有明确的
height或max-height，否则overflow-y: auto不会触发，根本没滚动条可隐藏 -
scrollbar-width: none必须写在设置了overflow-y: auto或overflow-y: scroll的元素上，不能只加在html或body上试图全局隐藏（对整页无效） - 值只能是
auto、thin、none，没有hidden或0；写错值等于没写
Chrome/Safari/Edge 用 ::-webkit-scrollbar 隐藏，但 display: none 不够稳
::-webkit-scrollbar 是 WebKit/Blink 内核唯一可靠路径，但只写 display: none 在部分 Safari 版本中会失效，尤其 macOS 14+ 和 iOS 17+。
- 推荐用
width: 0; height: 0;+background: transparent;组合，比display: none更兼容 - 必须同时声明
::-webkit-scrollbar、::-webkit-scrollbar-track、::-webkit-scrollbar-thumb，漏掉任一，旧版 Safari 可能回退显示灰色滑块 - 不能写在
style=""内联样式里，只在<style></style>块或外部 CSS 文件中生效
别碰 overflow: hidden，它不是“隐藏滚动条”，而是“禁用滚动”
这是最常被误用的点：写 overflow: hidden 后内容不滚了，不是滚动条藏起来了，是整个滚动机制被关掉了。
-
overflow: hidden会导致内容被裁剪，且无法响应鼠标滚轮、方向键、触控板拖拽 - 所有“隐藏但保留功能”的方案，都依赖
overflow: auto或overflow: scroll这个前提；删掉它，CSS 隐藏规则就失去作用对象 - 如果容器父级用了
overflow: hidden，子容器即使写了完整隐藏规则，也可能因渲染链被截断而无效
iOS Safari 不吃任何 scrollbar 隐藏方案
iOS 上的 Safari 完全忽略 ::-webkit-scrollbar 和 scrollbar-width，这不是 bug，是设计如此——它默认就不渲染滚动条（除极少数调试场景）。
- 不要为 iOS 单独写适配，加了也白加，还可能触发渲染异常
- 如果发现 iOS 里内容不能滑动，问题大概率出在
-webkit-overflow-scrolling: touch（已弃用）或overscroll-behavior: contain拦截了事件，跟滚动条样式无关 - 真正要关注的是：隐藏后用户仍能用惯性滚动、键盘操作，但失去了拖拽滑块的交互方式，这点在长列表或表单中容易被忽略
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
