真正稳的方案需同步控制DOM结构、滚动位置和事件流向：必须同时锁定html和body的overflow并设height:100%，用position:fixed+top:-scrollTop防止跳顶，精准拦截非弹窗区域touchmove，并兼容iOS键盘弹出导致的滚动闪动。
移动端弹窗弹出时背景还能滚动，不是 CSS 写得不够狠，而是只靠 overflow: hidden 治标不治本。iOS Safari 和部分安卓浏览器会绕过 body 的 overflow 限制，尤其在地址栏收起、键盘弹出或惯性滚动时，页面照样“偷偷滑”。真正稳的方案，得同时控制 DOM 结构、滚动位置和事件流向。
同时锁定 html 和 body，别只动 body
只给 body 加 overflow: hidden 在多数真机上无效。必须对 html 和 body 同步操作：
- 弹窗打开时：设置
document.documentElement.style.overflow = 'hidden'且document.body.style.overflow = 'hidden' - 为防高度塌陷，补充
html, body { height: 100% }（CSS 中提前定义好） - 关闭弹窗时，记得还原两个元素的
overflow值，不能只清空一个
用 position: fixed 锁住滚动位置，防止页面跳顶
光锁 overflow 会导致页面自动滚回顶部——因为浏览器把 height: 100% 当作从顶部截取一屏。解决办法是“钉住”当前视口：
- 打开弹窗前，记录
const scrollTop = window.scrollY - 给
body设置position: fixed; top: -${scrollTop}px; - 关闭弹窗时，先恢复
body.style.position和top，再执行window.scrollTo(0, scrollTop)
精准拦截 touchmove，不误伤弹窗内操作
全局监听 touchmove 并 preventDefault() 会干掉弹窗里的轮播、输入框拖动甚至下拉刷新。安全做法是“只拦外面”：
- 监听
document的touchmove，选项传{ passive: false } - 在回调里用
event.target.closest('.modal')判断是否点在弹窗区域 - 不在弹窗内才调
event.preventDefault() - 弹窗关闭时务必
removeEventListener，避免内存泄漏
兼容 iOS 键盘弹出导致的滚动闪动
iOS WebKit 会在软键盘唤起时强行滚动聚焦元素进可视区，直接破坏锁定效果。缓解方式很务实：
- 弹窗内的 input/textarea 调用
el.scrollIntoView({ block: 'nearest' }) - 键盘弹出后约 100ms，用
setTimeout(() => window.scrollTo(0, scrollTop), 100)强制回位 - 若弹窗含表单，考虑将输入框用
position: fixed+bottom: env(keyboard-inset-height)固定在键盘上方（需配合 meta viewport 配置）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
