iOS Safari中body设overflow:hidden无效，因其将html视为根滚动容器，body被降级为非独立滚动上下文而忽略该属性；真正生效需满足：html显式设overflow:hidden+height:100%，或body设position:fixed+top:-Ypx并保存还原scrollY。

body 或 html 上设 overflow:hidden 为什么没用

因为 WebKit（尤其是 iOS Safari）把 html 当作根滚动容器，body 默认是 static 定位、无显式尺寸约束，在渲染树中被降级为“非独立滚动上下文”，它的 overflow 属性直接被忽略。这不是 bug，而是引擎机制——body { overflow: hidden } 在移动端根本不会生效。

真正起作用的两个关键点

必须同时满足以下任一组合，才能阻断 viewport 级滚动：

MoltOverflow

Moltbots问答社区 - 提问编程问题，分享解决方案

下载

• html 元素显式设置 overflow: hidden + height: 100%（注意：仅 body 设没用）
• body 设置 position: fixed + top: -Ypx（Y 是当前 window.scrollY），并配合 left: 0; width: 100%
• 用包裹层替代全局控制：给内容区外层加 div，设 height: 100vh + overflow: hidden，而不是动 body

touchmove 事件会绕过 CSS 滚动限制

即使视觉上没滚动条，用户手指滑动仍可能触发原生滚动，尤其在以下情况：

• 遮罩层（如弹窗）自身未阻止 touchmove，事件会穿透到下层 document
• 子元素用了 position: absolute 或 fixed，但父容器没设 overflow: hidden，导致其脱离文档流后仍可被 touch 触发滚动
• iOS 的 rubber-banding 效果（下拉回弹）本质是 viewport 行为，CSS 无法抑制，只能靠 position: fixed + 位移补偿来规避

容易被忽略的兼容细节

不同平台对同一写法响应差异极大：

• iOS 15+ 中，body { overflow: hidden; position: fixed } 会导致页面瞬间跳顶，必须手动保存并还原 scrollY
• 安卓部分 WebView 对 html { overflow: hidden } 支持不稳定，建议 fallback 到包裹层方案
• 如果页面已有 transform、will-change 或 backface-visibility，可能意外创建新的 stacking context，干扰 overflow 生效范围
• 使用 preventDefault() 拦截 touchmove 时，记得加 { passive: false }，否则 Chrome 和 Safari 会静默忽略

实际中最稳的做法不是只盯一个属性，而是结合定位控制 + 事件拦截 + 滚动位置管理——三者缺一不可，尤其在弹窗类场景里，漏掉 scrollY 保存，关闭后用户就永远回不到原来位置了。