dialog.showmodal()不锁背景滚动，需手动用body.style.position='fixed'配合scrolly偏移实现锁定，关闭后恢复；这是规范行为而非bug，必须在showmodal()前执行锁定。
dialog.showModal() 本身不锁背景滚动，得靠 CSS 或 JS 补位
很多人以为 showModal() 会自动禁用页面滚动，其实不会——它只管焦点、backdrop 和 Esc，**对 body 滚动完全不管**。Chrome/Firefox/Safari 都如此，这是规范行为，不是 bug。
常见现象：弹窗打开后，手指在 dialog 内容区上下滑，底层页面跟着滚；或者 dialog 关闭后，页面跳回顶部。
- 不要依赖
showModal()自带滚动控制，它压根没这功能 - 别给
html或body直接设overflow: hidden，否则关闭时 scrollTop 丢失、页面跳动 - 推荐做法：打开前记录
window.scrollY，再用body.style锁定位置并偏移还原
用 body.style.position = 'fixed' 锁滚动最稳，但必须配 scrollTop 偏移
这是目前兼容性最好、无 touchmove 事件冲突、不破坏滚动链的方案。核心是把 body “钉住”，同时补偿滚动偏移，避免视觉跳变。
实操写法（建议封装成函数）：
function lockBodyScroll() {
const top = window.scrollY;
document.body.style.cssText = `
position: fixed;
width: 100vw;
top: -${top}px;
`;
}
<p>function unlockBodyScroll() {
const top = document.body.style.top;
document.body.style.cssText = '';
window.scrollTo(0, parseInt(top) * -1);
}
</p>
- 必须在
showModal()前调用lockBodyScroll()，否则滚动穿透仍会发生 -
unlockBodyScroll()要在dialog.close()后或close事件里执行，不能等animationend - 注意 Safari 对
position: fixed的渲染有时序问题，加requestAnimationFrame更稳妥
Varlet 等组件库的 lock-scroll 是怎么工作的？原理可直接抄
Varlet 的 <var-dialog></var-dialog> 默认开启 lock-scroll，背后就是上面那段逻辑的增强版：它不仅记 scrollY，还监听 resize 防止横竖屏切换失位，并在关闭时恢复 focus 状态。
如果你不用 UI 库，可以直接复用它的思路，但要注意两个坑：
- 别在
dialog.open变为true后才锁滚动——这时用户可能已经滑了一段 - 如果页面有多个弹窗嵌套，需维护滚动栈，每次只操作最外层的 body 样式
- 移动端 WebView（尤其 iOS 15–16）中，
body.style.position = 'fixed'可能导致 input 失焦，可加transform: translateZ(0)强制硬件加速
为什么 backdrop 点击监听不能替代滚动锁定？
有人试过监听 dialog 的 click 并判断 e.target === dialog 来关窗，误以为这也“锁了滚动”。其实完全无关——这个监听只影响关闭逻辑，对 body 滚动零干预。
更危险的是：如果 dialog 内容高度不足一屏，用户滑不到底部，就根本触发不了 touchmove，但手指在边缘区域滑动时，仍会穿透到 body 上滚动。
-
dialog::backdrop是纯样式伪元素，无法绑定事件，也不能阻止滚动 - 点击 backdrop 关窗 ≠ 禁止背景滚动，前者是交互反馈，后者是布局控制
- 真正要防的是 touchstart → touchmove 的默认行为，CSS 锁定比 JS 阻止事件更可靠
关键点其实就一个：showModal() 不负责滚动，你得自己扛。浏览器原生 dialog 把焦点、backdrop、Esc 这些高价值能力做得很干净，但滚动锁定被刻意留白——因为场景太碎片化，统一实现反而容易翻车。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
