iOS Safari中body{overflow:hidden}完全失效，因其滚动链机制会绕过该声明，触发扬皮筋回弹时仍交由document根节点处理，导致页面晃动、回顶、宽度突变抖动。
body overflow:hidden 在 iOS 上为什么完全失效
因为 iOS Safari 的滚动链（Scroll Chaining）机制会绕过 overflow: hidden，尤其在触发橡皮筋回弹时，浏览器仍会把 touchmove 事件交给 document 根节点处理。哪怕你加了 body { overflow: hidden; }，手指一拖到底部，底层页面照样跟着晃。
更麻烦的是：一旦设置 overflow: hidden，body 会瞬间跳回顶部，滚动位置丢失；同时横向滚动条消失，导致页面宽度突变、内容左移——这就是常说的“抖动”。
所以别只写这一行 CSS：
body.modal-lock { overflow: hidden; }
必须配合以下操作才可能起效：
立即学习“前端免费学习笔记（深入）”；
- 打开弹窗前先记录
document.documentElement.scrollTop和document.body.scrollTop（两者都要读，不同内核默认不同） - 用
position: fixed替代纯overflow控制，避免回顶 - 还原时清空整个
style.cssText，不能只设position: static，否则残留的top值会干扰后续滚动
touchmove 阻止后弹窗内部无法滚动怎么办
直接在遮罩层上监听 touchmove 并调 e.preventDefault()，最常见后果就是：弹窗里带长列表或表单的区域也滚不动了。iOS 还会因此丢失阻尼效果，滑起来像卡顿。
真正可行的做法是「条件拦截」：只在用户滑动非可滚动子区域时阻止事件。
关键点在于判断目标是否落在可滚动容器内：
mask.addEventListener('touchmove', (e) => {
if (!e.target.closest('.modal-content, .scrollable')) {
e.preventDefault();
}
}, { passive: false });
注意：{ passive: false } 必须显式声明，否则现代浏览器会忽略 preventDefault()；.modal-content 要是你自己定义的、允许内部滚动的容器类名，不能是遮罩层本身。
如果弹窗里有 <input> 或 <textarea>，还要额外排除聚焦状态，否则软键盘唤起时会异常：
- 监听
focusin临时解除锁定 - 监听
blur后恢复锁定逻辑 - 避免对
document全局绑定touchmove，容易误伤轮播图、手势缩放等交互
position:fixed + top 偏移方案的兼容性坑
这是目前生产环境最稳的方案，但细节一错就翻车。核心不是“加 fixed”，而是“加得干净、去得彻底”。
典型错误写法：
document.body.style.position = 'fixed';
document.body.style.top = `-${scrollTop}px`;
问题在于：style 是覆盖式赋值，如果 body 原本有 inline style（比如某些 UI 库动态加的），会被清掉；且没设 width: 100%，在部分安卓 WebView 下会出现横向滚动条。
推荐写法（保留原有样式、防抖动、防宽度突变）：
const originalStyle = document.body.getAttribute('style') || '';
document.body.setAttribute('data-locked-style', originalStyle);
document.body.style.cssText = `position: fixed; width: 100vw; left: 0; top: -${scrollTop}px; overflow: hidden;`;
关闭时务必按顺序还原：
- 先恢复
style.cssText为原始值（或清空） - 再执行
window.scrollTo(0, scrollTop)，不能只靠document.body.scrollTop = scrollTop - 若存在多层弹窗嵌套，需用计数器管理锁状态，避免 unlock 多次导致 body 提前恢复可滚动
为什么 overscroll-behavior 不是万能解药
overscroll-behavior: contain 看似完美：它能切断滚动链，让弹窗滚动到头时不把余量传给 body。但现实很骨感：
iOS Safari 直到 16.4 才开始支持，旧版 WKWebView 完全不识别；安卓 Chrome 虽支持，但在某些 WebView 嵌套场景下（比如微信内置浏览器）会失效；而且它只对 touchmove 和 wheel 有效，对键盘唤起、软键盘顶起等导致的布局变化毫无作用。
更隐蔽的问题是：如果你给弹窗容器设了 overscroll-behavior: contain，但它的父元素没有设 overflow: auto 或 scroll，这个属性根本不会生效——它依赖明确的滚动上下文。
所以别把它当主力方案，最多作为辅助：
- 仅用于弹窗内部滚动容器（如
.modal-body） - 必须搭配
height或max-height+overflow: auto才能激活 - 永远不要单独依赖它来锁 body，它不负责控制 body 的滚动能力
