Modal显示时body滚动被禁用但页面仍可滚动，根本原因是iOS WebKit对overflow:hidden不拦截touch默认滚动行为，需结合touchmove事件拦截与滚动位置保存恢复。
modal显示时body滚动被禁用但页面仍可滚动
这是移动端 Safari 和部分安卓 WebView 的典型表现：设置 body { overflow: hidden } 后，视觉上停了，但手指在 modal 上滑动时，底下的页面依然会跟着动——本质是 touch 事件穿透到了 body，而 body 的滚动惯性未被真正阻断。
根本原因不是 CSS 没生效，而是 iOS WebKit 对 overflow: hidden 在 touch 场景下不拦截默认滚动行为。只靠 CSS 不够，必须配合事件拦截。
- 仅加
body { position: fixed; top: 0; width: 100%; }能临时止住，但会丢失当前滚动位置，关闭后无法自动恢复 - 用
touchmove阻止默认行为最直接，但必须限定作用域（只拦 modal 区域内的事件，避免影响内部可滚动元素） - 不要对整个
document绑touchmove，否则 modal 内的textarea或自定义滚动区会失灵
正确保存和恢复 body 滚动位置
modal 打开前记录 document.body.scrollTop（注意：iOS Safari 中应优先用 window.pageYOffset，更可靠），关闭时还原。不能只记 scrollTop，因为某些场景下 body 不是滚动容器，实际滚动的是 documentElement（即 html 元素）。
- 推荐统一读取：
const scrollY = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop - 还原时用
window.scrollTo(0, scrollY)，比直接赋值scrollTop更兼容 - 如果 modal 是全屏覆盖且需保持“吸顶”效果，可额外加
body { height: 100vh; overflow: hidden; }配合定位，但必须确保关闭后清除所有样式，否则影响后续页面
modal 内部需要局部滚动怎么办
当 modal 内容超长、需要内部滚动（比如长表单或列表），又不想触发底层穿透，就不能简单阻止所有 touchmove。得区分「modal 自身滚动」和「穿透到底层」两种行为。
立即学习“前端免费学习笔记（深入）”；
- 给 modal 内容区加
class="modal-content"，并设max-height: 80vh; overflow-y: auto; -webkit-overflow-scrolling: touch; - 监听 modal 根元素的
touchmove，仅当触摸点不在可滚动子元素内时才preventDefault() - 判断逻辑示例：
if (!e.target.closest('.modal-content')) e.preventDefault()，这样.modal-content内滑动能正常进行，其他区域则阻断 - 避免用
overscroll-behavior: contain：iOS Safari 16 以下不支持，且部分安卓 WebView 表现不稳定
Vue/React 项目中容易漏掉的清理环节
组件卸载或 modal 关闭时，若没及时解绑 touchmove 监听器或清除 body 样式，会导致后续页面滚动异常——比如返回列表页后完全不能滚，或滚动卡顿。
- Vue 中在
onBeforeUnmount或beforeDestroy里调用document.body.removeEventListener('touchmove', handler)并重置style - React 中在
useEffect的 cleanup 函数里做同样操作，尤其注意多次打开关闭 modal 时重复绑定的问题 - 样式重置建议用 class 切换而非内联 style：
document.body.classList.remove('no-scroll')，对应 CSS 写.no-scroll { overflow: hidden; position: fixed; } - 别忘了清除
touchmove的 passive 选项：如果绑定时用了{ passive: false }，解绑时必须一致，否则无效
最常出问题的不是打开 modal 的那一刻，而是关闭后的状态残留——滚动位置错乱、body 被锁死、事件监听器堆积。每次关闭后手动检查 document.body.style 和事件监听器列表，能快速定位这类隐形故障。
