真机上 body { overflow: hidden } 无效是因为 ios webkit 等不拦截 body 的 touch 滚动事件；应改用 position: fixed + top 定位锁定 body，并同步处理 html，配合 overscroll-behavior 锁定可滚动子元素，js 补漏需精准判断可滚动区域。
为什么 body { overflow: hidden } 在真机上基本没用
这不是你写错了，是 iOS WebKit 和部分安卓 WebView（比如旧版 UC、QQ）压根不拦截 body 上的 touch 滚动行为。overflow: hidden 只管渲染层是否显示滚动条，不管事件流——手指一滑，底层页面照样惯性滚动。常见错误就是弹窗打开后只执行 document.body.style.overflow = 'hidden'，结果 iPhone 上拖着遮罩层，背景页还在动。
真正起效的 CSS 方案：用 position: fixed 钉住 body
核心逻辑不是“禁滚动”，而是让 body 物理上失去滚动能力：脱离文档流后，它自然无法被拖拽滚动。
- 弹窗打开前，先记录当前位置：
const scrollY = window.pageYOffset（别用document.body.scrollTop，iOS Safari 里它常为 0） - 设
document.body.style.position = 'fixed'，再加document.body.style.top = `-${scrollY}px`，把视觉位置拉回来，避免跳顶 - 关闭时，先清空
position和top，再调window.scrollTo(0, scrollY)还原 - 注意：仅对
body做这套操作不够稳定；更稳妥的是同时锁html——给html加position: fixed; top: -${scrollY}px; width: 100%
overscroll-behavior 必须设在可滚动子元素上
这个属性能防弹性回弹穿透（比如下拉刷新、滚动到底部继续拖），但它只对「实际可滚动」的容器生效。直接写在 .modal 根节点上是无效的，因为那个容器本身不可滚动。
- 找到内部真正要滚动的区域，比如
.modal__content，确保它有明确高度 +overflow-y: auto - 加上：
.modal__content { overscroll-behavior: contain; } - 如果连回弹都要禁（如防止干扰表单），才用
overscroll-behavior: none - 兼容性：iOS 16.4+、Chrome 63+、Firefox 59+ 支持；旧版 Safari 需 JS fallback
JS 补漏必须精准，不能无差别 preventDefault
兼容 iOS 12–14 或某些安卓 WebView 时，仍需 JS 拦截，但绝不能对整个遮罩层或 document 绑 touchmove 并粗暴 e.preventDefault()——否则弹窗里的 textarea、长列表、轮播图全失灵。
- 监听弹窗根节点（比如
.modal）的touchmove事件，注册时带{ passive: false } - 用
e.target.closest('.scrollable')判断触摸点是否落在可滚动区（提前给该区域加 class） - 不在可滚动区内才调
e.preventDefault()；在就放行 - 弹窗关闭时务必移除监听，避免内存泄漏
window.pageYOffset 必须在锁定前读取、html 和 body 的样式要协同处理、键盘唤起时的跳顶问题——这些不是边缘 case，而是真机上高频出现的实际障碍。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
