overflow: hidden 在 iOS Safari 中对 body/html 失效，因其滚动由系统级手势处理，仅裁剪内容而不阻断滚动；需配合 position: fixed、显式高度及 overscroll-behavior 或 JS 拦截才能可靠禁用滚动。
直接说结论：overflow: hidden 在 iPhone（iOS Safari）上对 body 或 html 失效，不是你写错了，而是浏览器故意忽略——它不把滚动事件绑定在这些元素上，也不响应它们的溢出控制。
为什么 iOS Safari 无视 body { overflow: hidden }
iOS 的滚动机制和桌面/安卓完全不同：它的主滚动容器是 body 元素本身，但滚动行为由系统级 gesture handler 管理，overflow 属性仅影响“内容裁剪”，不干预 touch 滚动链路。结果就是：样式写了，DOM 上也生效了，但手指一划，页面照常回弹、照常滚动。
更麻烦的是，这个限制还带条件：
-
body没设height或max-height时，overflow: hidden直接被跳过 - 即使加了
height: 100vh，Safari 仍可能因视口缩放、键盘唤起等导致计算偏差，让 overflow 失效 -
html上设overflow: hidden完全没用——iOS 不读这个节点的滚动策略
overflow-y: hidden 单独写更危险
很多人想“只锁纵向”，于是写 body { overflow-y: hidden }，这在 iOS 上比全量 overflow: hidden 还容易翻车：
- 部分旧版 Safari（iOS 15 及更早）会把
overflow-y: hidden当作无效声明整体丢弃 - 如果父容器用 flex 或 grid 布局撑高，但没显式 height，
overflow-y就彻底不触发渲染层，等于没写 - 简写形式如
overflow: hidden auto在某些 WebView 中会被解析成overflow: auto，反而打开滚动
真正可靠的做法是：用完整值 overflow: hidden + 显式高度约束 + 渲染层触发，三者缺一不可。
遮罩弹出时背景还在滚？问题不在 overflow
常见场景：点击按钮弹出 modal，背景却还能上下滑——这不是 overflow 没生效，而是滚动事件穿透到了 body。iOS 默认允许“滚动传播”（overscroll chaining），哪怕遮罩容器自己设置了 overflow: auto，拖到底部继续划，就会把外层带起来。
解决它不能只靠 CSS 锁 body：
-
overscroll-behavior-y: contain必须加在遮罩容器自身（比如<div class="modal">），且该容器必须可滚动（即有 <code>overflow-y: auto） - Safari 16.4+ 才原生支持
overscroll-behavior；更低版本得用 JS 拦截：touchmove时判断是否在容器内、是否已到顶/底，再决定是否preventDefault() - 光加
overflow: hidden到body，不记录并还原scrollTop，关闭弹窗时页面会“啪”地跳回顶部
最稳的落地组合（含 JS 协同）
纯 CSS 搞不定，必须 JS 配合。以下是最小可行组合，已在 iOS 15–17 实测有效：
① 遮罩显示时：
const scrollTop = document.body.scrollTop || window.pageYOffset;
document.body.style.position = 'fixed';
document.body.style.top = `-${scrollTop}px`;
document.body.classList.add('no-scroll');
② 对应 CSS：
.no-scroll {
overflow: hidden;
height: 100vh;
width: 100vw;
}
③ 遮罩关闭时：
document.body.classList.remove('no-scroll');
document.body.style.position = '';
document.body.style.top = '';
window.scrollTo(0, scrollTop);
注意：别漏掉 window.scrollTo 这一步——这是 iOS 上保持滚动位置唯一靠谱的方式，scrollTop 赋值在 fixed 后会失效。
复杂点在于，它不是单一样式问题，而是滚动权归属、事件传播路径、渲染层触发、历史滚动位点四个层面同时要对齐。少一个，iPhone 上就大概率滑得动。
