移动端隐藏滚动条需显式建立滚动上下文：html/body设height:100%、overflow:scroll，配合::-webkit-scrollbar{width:0}及scrollbar-width:none；ios safari 16.4+优先用scrollbar-width:none，安卓需注意厂商webview差异。
移动端隐藏 body 默认滚动条要设 height: 100% + overflow: scroll
直接给 html 或 body 加 overflow: hidden 或 ::-webkit-scrollbar { width: 0 } 在多数移动端浏览器里无效——因为根元素默认不触发滚动上下文。必须显式建立滚动容器。
实操建议：
-
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }是前提，否则overflow不生效 -
body { overflow: scroll; }强制启用滚动（不能用auto，部分安卓 WebView 不识别） -
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; }才能真正隐藏 iOS/Android Chrome 的右侧默认滚动条 - 注意副作用：
document.body.scrollTop和window.pageYOffset在部分华为/小米浏览器中会恒为 0，需改用document.documentElement.scrollTop
横向滚动容器（如轮播图）隐藏滚动条的可靠写法
移动端 overflow-x: auto 容器常在 Chrome for Android 或 Safari 上漏出滚动条轨道，尤其在内容刚好撑满时。单纯 ::-webkit-scrollbar { width: 0 } 不稳定。
实操建议：
- 容器必须设
overflow-x: scroll（不是auto），确保滚动行为被激活 - 同时声明三类 WebKit 伪元素：
::-webkit-scrollbar、::-webkit-scrollbar-track、::-webkit-scrollbar-thumb，任一缺失都可能导致 fallback 到默认样式 - 推荐写法：
.carousel { overflow-x: scroll; -webkit-overflow-scrolling: touch; } .carousel::-webkit-scrollbar { width: 0; height: 0; } .carousel::-webkit-scrollbar-track { background: transparent; } .carousel::-webkit-scrollbar-thumb { background: transparent; } - iOS Safari 16+ 对
::-webkit-scrollbar支持进一步弱化，若仍闪现，可加scrollbar-width: none（仅对垂直有效，横向无效，但无害）
Firefox for Android 隐藏滚动条必须避开 html/body
scrollbar-width: none 在 Firefox 移动端只对非根元素生效，写在 html 或 body 上完全被忽略——这是最常踩的坑。
实操建议：
- 包裹一层
<div class="scroll-root"></div>，把全部内容放进去 - 对这个容器设：
.scroll-root { overflow: auto; scrollbar-width: none; } - 不要依赖
scrollbar-color: transparent transparent做兜底：它在 Firefox for Android 上表现不一致，有时滑块变透明但轨道残留灰线 - 验证方式：在 Firefox for Android 中长按页面空白处，若出现“放大镜”光标且可拖动，则滚动仍有效；若光标消失或无法拖动，说明
overflow被意外截断（检查祖先元素是否含overflow: hidden）
iOS Safari 隐藏滚动条最稳方案是放弃 ::-webkit-scrollbar
iOS Safari（尤其 16.4+）对 ::-webkit-scrollbar 的支持已退化为“仅部分版本响应 width: 0”，真机测试常发现滚动条在快速滑动后短暂闪现。这不是代码错，是渲染策略变更。
实操建议：
- 优先使用
scrollbar-width: none（iOS Safari 16.4+ 已支持该属性） - 容器必须带明确
height或max-height，且不能是min-height: 100vh—— 否则 Safari 认为“无溢出”，不触发scrollbar-width解析 - 避免父级有
transform或will-change：它们会创建新层叠上下文，导致 Safari 忽略子容器的滚动条样式声明 - 底线方案：用
overflow: hidden+ JS 模拟滚动（如监听touchmove+transform: translateX()），彻底绕过原生滚动条，但需自行处理惯性、回弹、边界吸附
scrollbar-width 支持来得晚、去得突然；安卓厂商定制 WebView 对 ::-webkit-scrollbar 的解析逻辑各不相同。最保险的做法，永远是真机连 ADB 或 Safari Web Inspector 实时看 computed 样式里 overflow 和 scrollbar-width 是否真的生效。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
