结论：需同时使用 overscroll-behavior: none（body）与 contain（滚动容器）+ javascript 补漏（ios 15以下），并确保 fixed 遮罩层内可滚动区域显式设 overscroll-behavior: contain，避免滚动穿透。
移动端 fixed 元素导致 body 滚动穿透怎么办
直接说结论：position: fixed 本身不会“锁住”滚动，它只是把元素脱离文档流并相对于视口定位——但真正引发滚动穿透的，是 body 在 fixed 元素显示时仍保有滚动能力。iOS Safari 尤其明显：哪怕你给 body 加了 overflow: hidden，手指在 fixed 遮罩层上滑动，底层页面照样会滚。
为什么 overflow: hidden 对 body 失效（尤其 iOS）
iOS WebKit 有个老毛病：当 body 没有显式设置 height: 100vh 或 overscroll-behavior，且内容高度超过一屏时，overflow: hidden 会被忽略。更麻烦的是，Safari 会把 touchmove 事件“透传”给可滚动的祖先（比如 body），哪怕 fixed 元素盖在上面。
-
body必须同时设overflow: hidden和position: relative（防某些安卓机型 fallback 失效） - 仅靠 CSS 不够稳定，iOS 需要配合
touchmove阻止默认行为 - 不要只给
html或只给body加限制，两者常需协同控制
用 overscroll-behavior 简单封住穿透（现代方案）
overscroll-behavior 是目前最干净的解法，它告诉浏览器：“这个容器滚到边了，别把滚动传给父级”。但它不支持 iOS 15 以下和旧版 Android WebView。
- 对弹窗遮罩层的滚动容器（比如
.modal-content），加overscroll-behavior: contain - 对
body本身，加overscroll-behavior: none（比overflow: hidden更可靠） - 注意：该属性只影响“滚动溢出”行为，不影响容器是否可滚动——内容仍需可滚动才生效
body {
overscroll-behavior: none;
}
.modal-scrollable {
overscroll-behavior: contain;
overflow-y: auto;
height: 80vh;
}
JavaScript 补漏：监听 touchmove 并 preventDefault
兼容 iOS 12–14 和部分安卓 WebView，必须用 JS 拦截。但不能无差别阻止所有 touchmove，否则遮罩层内可滚动区域（如长列表）会失灵。
- 只在遮罩层显示时，给
body绑定touchmove，且preventDefault()条件限定为“非目标元素内部滚动” - 优先检查
event.target是否在可滚动容器内，再决定是否放行 - 记得在遮罩关闭后移除监听，避免内存泄漏或影响后续页面
示例逻辑：
function lockBodyScroll() {
const handleTouchMove = (e) => {
if (e.target !== document.body && !e.target.closest('.scrollable')) {
e.preventDefault();
}
};
document.body.addEventListener('touchmove', handleTouchMove, { passive: false });
}
复杂点在于：滚动锁定不是“开个开关”就完事，它得在 fixed 容器、滚动上下文、事件捕获层级之间反复校准。最容易被忽略的是——你加了 overscroll-behavior，但忘了给遮罩层内的子容器也设 contain，结果滚动还是穿出去了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
