移动端弹窗滚动锁定需同时设置html和body样式并记录恢复scrolly，禁用touchmove须精准作用于非弹窗区域，ios键盘问题需结合scrollintoview与延迟回滚，overscroll-behavior仅防弹性穿透。
移动端弹窗时页面还在滚动？body 的 overflow 不够用
直接设 body { overflow: hidden } 看似能锁住背景，但实际在 iOS Safari 和部分 Android 浏览器里根本无效——滚动惯性、地址栏收起/展开、键盘弹出都会触发底层页面滚动。真正起作用的是对 html 和 body 同时加限制，并配合 position: fixed 重置滚动位置。
实操建议：
- 弹窗打开时，先记录当前
scrollY值：const scrollTop = window.scrollY - 给
html加style="position: fixed; width: 100%; top: -${scrollTop}px"，把整个视口“钉住”并回滚到原位置 - 同时设
body { overflow: hidden }防止键盘唤起后内容上顶 - 关闭弹窗时，恢复
html.style.position和body.style.overflow，再调用window.scrollTo(0, scrollTop)
touchmove 事件阻止太粗暴，会干掉所有手势
用 event.preventDefault() 拦截 touchmove 是常见做法，但一旦绑定在 document 上，连弹窗内的滑动轮播、下拉刷新、甚至输入框光标拖动都会失效。它不是“锁背景”，而是“禁一切触摸滚动”。
更安全的做法是只拦截非弹窗区域的滚动：
- 监听
touchmove时，检查event.target是否在弹窗容器内（比如event.target.closest('.modal')） - 不在弹窗内才调用
event.preventDefault() - 必须搭配
{ passive: false }注册事件，否则 Safari 会忽略preventDefault - 别忘了在弹窗关闭时移除该监听，避免内存泄漏
iOS 键盘弹出导致背景“闪一下”或自动滚动到顶部
这是 iOS WebKit 的经典 Bug：软键盘唤起时，浏览器会尝试把聚焦元素滚动进可视区，结果把被锁住的 html 又强行拖动了。单纯靠 CSS 或 JS 锁定挡不住这个行为。
缓解方案有限但有效：
- 给弹窗内的
input或textarea加scrollIntoView({ behavior: 'smooth', block: 'nearest' })，避免触发全局滚动 - 键盘弹出瞬间，用
setTimeout(() => window.scrollTo(0, scrollTop), 100)强制回位（iOS 下延迟很关键） - 如果弹窗本身带表单，考虑用
position: fixed+top: env(safe-area-inset-top)把输入框固定在键盘上方，减少滚动需求
为什么 overscroll-behavior 不能单独解决问题
overscroll-behavior: contain 确实能阻止滚动穿透，但它只对“滚动到底边界后继续拖拽”的弹性效果起作用（即 overscroll），对正常滚动过程中的穿透完全没影响。也就是说，用户手指一动，背景照常滚。
所以它只能当辅助项用：
- 加在弹窗容器上：
style="overscroll-behavior: contain"，防止弹窗内滚到底还触发背景回弹 - 加在
body上无效，因为body不是可滚动容器（真正滚动的是html或根视口） - 兼容性要注意：Android Chrome 63+、Safari 16.4+ 才支持，旧版 iOS 直接忽略
最麻烦的其实是各种“组合触发”：iOS 键盘 + 地址栏收缩 + 弹窗打开 + 用户快速连点。这时候单靠 CSS 或单个 JS 逻辑都容易漏，得把位置锁定、事件过滤、键盘响应三者串起来做状态管理。滚动锁定不是开关，是个需要持续守着的活儿。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
