body { overflow: hidden } 在真机无效是因 ios webkit 等不拦截 body 的 touchmove 事件；需用 position: fixed + pageyoffset 保存还原滚动位置，并对实际可滚动子元素设 overscroll-behavior: contain，辅以精准 js 判断防穿透。
为什么 body { overflow: hidden } 在真机上基本没用
这不是你 CSS 写错了，是 iOS WebKit 和部分安卓 WebView（比如旧版 UC、QQ）压根不拦截 body 上的 touchmove 事件流。overflow: hidden 只控制渲染层是否显示滚动条，不影响手指滑动时底层页面的惯性滚动。常见现象：弹窗一打开，拖着遮罩层，背景页照常往上/下滚——尤其在 iPhone 上非常明显。
用 position: fixed 钉住 body 并同步记录 window.pageYOffset
核心思路不是“禁滚动”，而是让 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)还原 - 更稳妥的做法是同时锁
html：document.documentElement.style.position = 'fixed'+top偏移，因为某些安卓 WebView 对body的 fixed 行为不一致
overscroll-behavior 必须设在真正可滚动的子元素上
这个属性能防弹性回弹穿透（比如下拉刷新、滚到底部继续拖），但它只对「实际可滚动」的容器生效。直接写在 .modal 根节点上是无效的，因为那个容器本身不可滚动。
- 找到弹窗内真正要滚动的区域，比如
.modal__content，确保它有明确高度 +overflow-y: auto - 给它加：
.modal__content { overscroll-behavior: contain; }（推荐：允许内部回弹，但切断穿透） - 如果连内部回弹也要禁（如防止干扰表单），才用
overscroll-behavior: none - 兼容性注意：iOS 16.4+、Chrome 63+、Firefox 59+ 支持；旧版 Safari（iOS 12–15）需 JS fallback
JS 补漏必须精准判断触摸点是否落在可滚动区
兼容旧环境时仍需 JS，但绝不能无差别 e.preventDefault()——否则弹窗里的 textarea、长列表、轮播图全失灵。
- 给可滚动区域加 class，比如
.scrollable - 监听弹窗根节点（如
.modal）的touchmove，注册时带{ passive: false } - 用
e.target.closest('.scrollable')判断触摸点是否在可滚动区内：不在才调e.preventDefault()，在就放行 - 千万别对
document或body绑touchmove，会干掉所有原生滚动控件 - 记得在弹窗关闭后移除监听，否则可能引发内存泄漏或影响后续页面
真正难的不是加一行样式，而是滚动位置保存时机、html 与 body 的协同控制、以及可滚动区域的精确识别——这三个点一旦漏掉任意一个，真机上大概率还会穿。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
