iOS上dialog.showModal()仍滚动穿透是因Safari滚动链机制无视body{overflow:hidden}，须组合三步：记录并固定滚动位置、动态设body为position:fixed、条件拦截touchmove且passive:false。
dialog.showModal() 为什么在 iOS 上仍会滚动穿透
因为 Safari 的滚动链（Scroll Chaining）机制不响应 body { overflow: hidden }，它把滚动视为 viewport 级行为，而非 DOM 元素级。你调用了 showModal()，也加了 aria-modal="true"，但手指一划，背景照样晃——这不是 JS 没执行，是浏览器压根没认这个限制。
必须配合的三步 CSS + JS 控制
单靠 <dialog> 标签或纯 CSS 无法在真机上锁死滚动。iOS 必须组合以下操作：
- 打开前记录滚动位置：
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop - 给
body加position: fixed; top: -${scrollTop}px，同时确保html和#app（如 Vue/React 根节点）也设overflow: hidden - 监听
dialog:show和dialog:close事件，在前者中应用样式，在后者中恢复滚动位置并清空style.cssText（不能只设position: static，残留top值会干扰后续滚动）
touchmove 条件拦截避免误杀内部滚动
直接在遮罩层上无差别调用 e.preventDefault()，会导致弹窗里带 .modal-scrollable 的长列表无法滑动。正确做法是判断目标是否落在可滚动区域内部：
dialog.addEventListener('touchmove', (e) => {
if (!e.target.closest('.modal-scrollable, input, textarea')) {
e.preventDefault();
}
}, { passive: false });
注意：{ passive: false } 必须显式传入，漏写等于没写；.modal-scrollable 是你自定义的、允许内部滚动的容器类名，不能是遮罩本身。
立即学习“前端免费学习笔记（深入）”；
DOM 结构和可访问性陷阱
<dialog> 必须是 body 的**直接子元素**，且应在 DOMContentLoaded 后调用 showModal()。如果它被嵌套在 <header> 或 <div id="app"> 深层内，会导致：
- aria-hidden 失效，屏幕阅读器仍朗读底层按钮
- 焦点无法锁定，Tab 键跳出弹窗
- 部分安卓 WebView 渲染异常，遮罩空白或点击穿透
更隐蔽的是：一个未闭合的 <div> 可能让整个 DOM 深度暴增，DevTools 里查 depth 超过 6 就得重构——这不是性能问题，是滚动穿透的温床。
