dialog标签调用showmodal()本身不禁止背景滚动，因原生模态逻辑不干预body滚动事件；ios safari等需配合body.position:fixed+滚动位置保存还原来可靠锁定。
dialog 标签本身**不自动禁止背景滚动**，哪怕调用了 showModal()，在 iOS Safari 和部分安卓 WebView 中，用户仍可能通过触摸拖拽使底层页面滚动——这不是 bug，是浏览器对 body 滚动容器的默认行为未被干预所致。
为什么 dialog.showModal() 不能阻止背景滚动
原生 dialog 的模态逻辑只管焦点锁定、Esc 关闭、backdrop 渲染和 Tab 键管理，它**完全不碰 body 或 html 的 overflow 样式或滚动事件**。尤其在移动端，touchmove 会穿透到 body 并触发滚动，而 dialog 不拦截它。
- Chrome Desktop 表现较好（常因
body高度撑不满 viewport 而“看似”不滚） - iOS Safari 15.4–16.3 及多数安卓 WebView：拖拽弹窗区域 = 拖拽背景页
- 即使加了
dialog::backdrop { background: rgba(0,0,0,.5); }，也无济于事
用 body.style.position = 'fixed' 锁定滚动最可靠
这是目前兼容性最好、无副作用、且能精确还原滚动位置的方案。关键不是“禁用”，而是“冻结 + 记录偏移”。
- 打开弹窗前，先读取
document.documentElement.scrollTop || document.body.scrollTop - 设
document.body.style.cssText = 'position: fixed; left: 0; top: -${scrollY}px; width: 100vw;' - 关闭弹窗时，清除
position: fixed，再window.scrollTo(0, scrollY) - 别用
overflow: hidden直接怼html或body—— 页面会闪跳回顶部
method="dialog" 提交后仍滚动？检查结构是否合规
表单提交后整页刷新或跳转，说明 method="dialog" 没生效，99% 是结构或调用时机问题。
-
<form method="dialog"></form>必须是<dialog></dialog>的**直接子元素**，中间不能有<div>、<code><section></section>等包裹 -
dialog必须已调用showModal()（仅写open属性无效） - 提交按钮必须是
button[type="submit"]或回车触发的可提交控件；button[type="button"]不触发 - 不要给
form绑onsubmit或addEventListener('submit', e => e.preventDefault())，这会彻底废掉method="dialog"的自动关闭逻辑 - 强制居中必须写死：
dialog { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } -
::backdrop在 Safari 中点击时e.target常为body，不能只靠e.target === dialog判断 - 安全写法是监听
dialog的click事件，并用e.clientX / e.clientY对比dialog.getBoundingClientRect()边界，或 fallback 到e.target === dialog || e.target === dialog.backdrop（需注意backdrop属性非标准） - 别给
dialog设transform外的动画（如scale），Safari 16.3 前可能直接不渲染
Safari 中 dialog 不居中、::backdrop 点击失效？手写定位 + 事件委托
各浏览器对 dialog 默认样式差异极大：Firefox 透明无边框，Safari 不居中，Chrome 自带阴影圆角。所有这些都得手动覆盖。
真正麻烦的从来不是 dialog 怎么显示，而是它“什么都没帮你做”——滚动锁定、样式归一、点击关闭、焦点修复，全得自己补。别指望一次写完就跨端可用，iOS 和旧版 Safari 仍是最大变量。
