ios移动端body滚动失效是因safari对position:fixed的限制，需用document.scrollingelement.scrolltop保存还原；-webkit-overflow-scrolling:touch须配合overflow-y:scroll和明确高度；隐藏滚动条宜用遮罩层而非css伪元素；横向滚动条多因viewport或内容溢出。
移动端 body 滚动失效或穿透怎么办
iOS 上 body 滚动常被禁用或卡死，尤其在弹层（如遮罩、弹窗）打开后关闭，页面无法恢复滚动，甚至出现“假死”——这不是 bug，是 Safari 对 position: fixed 的强制行为限制。
核心问题在于：iOS 会把 body 的滚动权交给 document.scrollingElement，但低版本 Safari 不支持该属性，且一旦给 body 加 position: fixed，它就彻底失去滚动能力。
- 必须手动保存并还原
document.scrollingElement.scrollTop，不能只操作body.scrollTop - 兼容写法要兜底
document.documentElement或document.body，推荐用document.scrollingElement || document.documentElement - 弹层打开时加
body.modal-open { position: fixed; width: 100%; top: -scrollTop + 'px'; }，关闭时立刻还原scrollingElement.scrollTop - 避免在弹层期间监听
touchmove并preventDefault()，这会导致后续滚动延迟或失灵
-webkit-overflow-scrolling: touch 必须加，但有陷阱
这个 CSS 属性是 iOS Safari 实现“弹性滚动”的关键开关，不加就会卡顿、滑不动、松手即停。但它不是万能的，且只对设置了 overflow: auto/scroll 的元素生效。
- 必须配合
overflow-y: scroll（或auto），单独写-webkit-overflow-scrolling: touch无效 - 父容器需有明确高度（
height或max-height），否则滚动区域无法计算 - iOS 15+ 在某些 WebView 中会忽略该属性，可额外加
will-change: transform触发硬件加速 - 慎用于
body或html根元素——部分 iOS 版本会引发页面整体偏移或缩放异常
隐藏滚动条但保留滚动功能的可靠写法
用户不需要看到丑陋的滚动条，但必须能滑动。CSS 隐藏方案在 iOS 上极不稳定，::-webkit-scrollbar 基本无效，scrollbar-width: none 仅 Firefox 支持。
- 最稳妥方式：用一个同色遮罩层盖住滚动条区域，例如
padding-right: 4px+margin-right: -4px配合背景色匹配 - 若用自定义滚动条 JS 方案（如
scrollBar.js），务必限制其作用域，避免劫持全局body滚动事件 - 不要依赖
overflow: hidden来“隐藏”，它直接禁用滚动，和需求相悖 - 微信内嵌 WebView 对
scrollbar样式支持更差，建议优先采用结构规避（如用transform: translateY模拟滚动）
横向滚动条意外出现的根因与修复
首次加载 H5 页面时出现横向滚动条，手指缩放后消失——这几乎 100% 是 viewport 缩放失控或内容溢出导致，跟 JS 无关。
- 检查
<meta name="viewport">是否漏了initial-scale=1.0或写了user-scalable=yes，后者会让 iOS 自动放大文本触发溢出 - 确认所有块级元素没写死
width超过100vw，特别是input、textarea、图片、伪元素生成的内容 - 用
* { box-sizing: border-box; }统一盒模型，避免 padding/border 导致宽度撑破 - iOS Safari 对
font-size: smaller或text-size-adjust: auto敏感，可显式设text-size-adjust: 100%
滚动优化不是堆 CSS 属性或引入大库，而是对每个 overflow、每行 transform、每次 scrollTop 赋值都保持警觉——iOS 的滚动机制比表面看起来更脆弱，也更讲究时机。真正难的从来不是“让它动起来”，而是“让它只在该动的时候动”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
