overflow: hidden对body无效是因iOS WebKit等不拦截touchmove事件；应优先用overscroll-behavior: none（现代）或position: fixed+scrollY记录（兼容兜底），uni-app需用teleport避免scroll-view干扰。
为什么overflow: hidden对body无效
不是写法错了，是 iOS WebKit 和部分安卓 WebView（如旧版 QQ、UC）根本不把 body { overflow: hidden } 当真。视觉上没滚动条，手指一滑，底层页面照样惯性滚动——因为 touchmove 事件仍会透传给可滚动的祖先（比如 body），而 overflow: hidden 并不拦截默认滚动行为。
常见错误包括：只加 document.body.style.overflow = 'hidden'，真机测试时发现背景页仍在动；更糟的是，某些安卓机型还会因未设 position: relative 导致 fallback 失效。
用overscroll-behavior切断滚动链（现代首选）
它不重排、不跳顶、不丢 scrollY，直接切断滚动事件向父级的传递，且支持细粒度控制。但注意：它必须设在实际可滚动的容器上，不是弹窗 wrapper，而是内部有 overflow-y: auto 的内容区。
- 给弹窗内部可滚动区域（如
.modal-content）加overscroll-behavior: contain - 给
body加overscroll-behavior: none（比overflow: hidden更可靠） - 若只需禁 y 轴穿透（比如保留横向轮播），用
overscroll-behavior-y: none
兼容性：Chrome 63+、Firefox 59+、Safari 16.4+（即 iOS 16.4+）。iOS 15 及以下必须降级为 JS 方案。
用position: fixed锁住body（兼容性兜底）
这是目前最稳的全平台方案，尤其适用于 iOS 15 及以下、旧版 WebView。核心不是“禁滚动”，而是让 body 物理上失去滚动能力：固定定位后脱离文档流，自然无法被拖拽。
- 打开前记录位置：
const scrollY = window.pageYOffset - 设
document.body.style.position = 'fixed'，再设document.body.style.top = `-${scrollY}px` - 关闭时先还原
position和top，再调用window.scrollTo(0, scrollY) - 不要只改
document.body.scrollTop，iOS Safari 中该值常为 0，必须优先读window.pageYOffset
注意 iOS Safari 中 scrollTop 恢复可能有 1 帧延迟，加 requestAnimationFrame 或 setTimeout(() => {}, 0) 兜底。
避免在scroll-view里放fixed元素（uni-app 专属坑）
uni-app 的 scroll-view 内部强制创建滚动上下文，只要 fixed 元素写在它里面，无论加多少 !important 或 transform: translateZ(0) 都无效——iOS Safari 直接无视，安卓部分 WebView 也会降级为 relative。
- 正确做法：把需要
fixed的按钮、导航条等，用document.body.appendChild强行挂到body最外层 - 确保这些元素不在任何
scroll-view、uni-page、或带transform的容器内 - 若必须动态控制显隐，用
v-if而非v-show，避免 DOM 留存干扰定位上下文
真正难的不是加一行 CSS，而是判断当前运行环境是否支持 overscroll-behavior，以及能否安全地操作 body 样式——尤其在 SSR 或多 Modal 共存场景下，漏掉 cleanup 或竞态冲突，会让滚动位置彻底失控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
