模态框打开时背景滚动未停，应通过设置document.body.style.overflow='hidden'关闭滚动，关闭时恢复为空字符串；iOS滚动穿透需用overscroll-behavior:contain解决。
模态框打开时背景滚动没停？检查 document.body 的 overflow
模态框弹出后背景还能滚动，本质是页面主体仍可滚动。原生实现的关键不是靠 JS 阻止事件，而是用 CSS 切断 body 的滚动能力。直接操作 document.body.style.overflow = 'hidden' 是最稳定的方式——比监听 touchmove 或 scroll 事件更可靠，也避免 iOS Safari 的滚动穿透问题。
注意：必须在模态框完全显示（即 display: block 或 visibility: visible）之后再设置，否则可能因重排未生效而失效。
- 打开模态框时：
document.body.style.overflow = 'hidden' - 关闭模态框时：
document.body.style.overflow = ''（清空内联样式，恢复原有值） - 不要用
overflow: hidden !important写在 CSS 文件里——它会覆盖用户自定义的overflow，比如某些组件需要横向滚动
为什么 position: fixed 模态框仍可能漏滚？
position: fixed 本身不触发滚动上下文，但若模态框内容高度超过视口、且内部有可滚动区域（如长列表），用户可能误以为“背景在动”——其实是模态框自己在滚。这时候需单独控制模态框内部的溢出行为：
- 给模态框容器加
max-height: 80vh和overflow-y: auto - 确保模态框的
top和left基于视口（而非父容器），避免意外继承父级overflow - iOS 上
fixed元素在键盘弹出时可能错位，建议配合viewportmeta 的height=device-height使用（但慎用，可能影响缩放）
关闭模态框时忘记恢复 body 滚动？加个清理钩子
用户可能通过 Esc 键、点击遮罩层、或直接调用 close() 关闭模态框。任何关闭路径都必须同步恢复 body 滚动，否则页面会卡死。推荐封装一个统一的关闭函数：
立即学习“前端免费学习笔记（深入）”；
function closeModal() {
document.getElementById('modal').style.display = 'none';
document.body.style.overflow = '';
// 可选：恢复焦点到触发按钮，提升可访问性
const triggerBtn = document.activeElement;
if (triggerBtn && triggerBtn.hasAttribute('data-modal-trigger')) {
triggerBtn.focus();
}
}
- 不要只在点击“X”按钮里写恢复逻辑——Esc 和遮罩层点击也要走同一出口
- 如果页面原本设置了
body { overflow: hidden }（比如某些 SPA 路由动画），用document.body.style.overflow = ''会丢失该规则；更健壮的做法是缓存原始值：const originalOverflow = document.body.style.overflow; ... document.body.style.overflow = originalOverflow;
移动端 Safari 的滚动穿透特别难搞？优先用 overscroll-behavior
iOS Safari 在模态框内滚动到底部时，会“穿透”到背后页面继续滚——这是浏览器默认行为，overflow: hidden 对它无效。真正有效的解法是给模态框遮罩层（overlay）加：
-
overscroll-behavior: contain：阻止滚动传递到父级 - 同时确保遮罩层是
position: fixed且覆盖整个视口（top: 0; left: 0; width: 100vw; height: 100vh） - 注意兼容性：
overscroll-behavior在 Safari 16.4+ 才完全支持，老版本仍需降级为监听touchmove并preventDefault()（仅针对遮罩层）
这个属性常被忽略，但它才是解决 iOS 穿透的核心，而不是反复 patch body 的 overflow。
