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 级滚动：
-
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 保存，关闭后用户就永远回不到原来位置了。
