移动端safari隐藏滚动条不可靠，因ios safari（尤其16前）忽略::-webkit-scrollbar且不支持scrollbar-width:none；chrome/edge on ios及android需用width:0+opacity:0组合确保滚动功能正常，firefox for android则可用scrollbar-width:none。
移动端 Safari 隐藏滚动条根本不可靠
iOS Safari（尤其 iOS 16 之前）完全忽略 ::-webkit-scrollbar，也不支持 scrollbar-width: none。所谓“隐藏”只是幻觉——它本来就不显示默认滚动条，但用户仍可通过触控板、键盘方向键或辅助技术滚动。强行加伪元素反而可能触发兼容性降级，比如 Safari 15 某些版本会因 ::-webkit-scrollbar { display: none } 导致拖拽失效。
Chrome / Edge on iOS 和 Android 必须用 width + opacity 组合
在 Chromium 内核的移动端浏览器（如 iOS 上的 Chrome、Android 全系），display: none 对 ::-webkit-scrollbar 有风险：部分旧版本会静默禁用滚动行为，而非仅视觉隐藏。安全做法是让滚动条“存在但不可见”：
-
::-webkit-scrollbar设width: 0或width: 4px（保留最小热区，避免触控失灵） -
::-webkit-scrollbar-track和::-webkit-scrollbar-thumb均设background: transparent或opacity: 0 - 容器必须有明确
overflow-y: auto或scroll，且内容实际溢出 - 避免只写
::-webkit-scrollbar而漏掉 track/thumb，否则某些 Android WebView 仍渲染灰色残影
Firefox for Android 用 scrollbar-width: none 即可
Firefox 移动版（Gecko 内核）支持 scrollbar-width: none，且行为稳定：视觉隐藏、滚动功能完整、支持惯性滚动和键盘导航。但它只对设置了 overflow: auto 或 scroll 的块级元素生效，不能写在 body 或 html 上就指望全局生效——必须限定到具体滚动容器，比如 .content-scroll。
真正要防的不是滚动条，而是布局偏移
隐藏滚动条后，容器宽度可能突然变宽（因原滚动条占位消失），导致内容重排或文字换行错乱。尤其在竖屏转横屏、键盘弹起时更明显：
- 用
padding-right: 16px补偿常见滚动条宽度（但 iOS 无固定值，需 JS 动态测） - 更稳妥的是用
overflow: overlay（已废弃，不推荐）或改用overscroll-behavior: contain控制弹性回弹 - 测试时务必真机操作：模拟器常不触发真实滚动行为，Safari 开发者工具里的“Toggle Device Toolbar”也未必反映触控反馈
最易被忽略的是：移动端滚动依赖 touch-action 和 pointer-events 的默认继承链，一旦父层设了 pointer-events: none 或 touch-action: pan-x，再完美的 CSS 隐藏也救不了滚动失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
