仅靠 overflow: hidden 在 body 上无法可靠禁用移动端背景滚动，因 iOS Safari 和部分安卓 WebView 会忽略该设置、保留 scrollTop 或触发 scrollIntoView；需配合 overscroll-behavior: contain（作用于可滚动遮罩容器）、JS 固定 body 位置、处理焦点滚动及低版本 Safari 的 touchmove 拦截。
仅靠 overflow: hidden 在 body 上加样式，无法在所有移动端设备上可靠禁用背景滚动——尤其在 iOS Safari 和部分安卓 WebView 中会失效。
为什么 overflow: hidden 在移动端经常失灵
这不是写法错误，而是浏览器底层行为差异导致的：
- iOS Safari 无视
body { overflow: hidden }对 touch 滚动的抑制，仍允许用户拖拽触发页面回弹（overscroll） - 某些安卓 WebView（如旧版 UC、QQ 浏览器内核）会忽略
html, body的overflow设置，或只在特定触发条件下生效 -
overflow: hidden不影响已存在的 scroll position，若遮罩打开前页面已滚动，body.scrollTop会被保留，关闭时可能跳回原位置 - 键盘唤起、焦点切换（如点击 input）仍可能触发
scrollIntoView，让背景“偷偷动一下”
overscroll-behavior: contain 必须加在遮罩容器本身
它才是解决滚动穿透（scroll-through）的真正关键，但必须用对地方：
- 作用对象是遮罩层容器（如
<div class="overlay">或原生<dialog>），不是内部内容区 - 该容器必须可滚动（即设置
overflow: auto或scroll），否则overscroll-behavior不生效 - 不要设
none：虽然也能阻止传播，但在部分安卓 WebView 中会意外拦截touchmove，导致遮罩内滚动卡顿 - Safari 16.4+ 才支持，低于此版本需降级处理（见下一条）
示例结构：
立即学习“前端免费学习笔记（深入）”；
<div class="overlay" style="overscroll-behavior: contain; overflow: auto; height: 100vh;">
<div class="glass-pane" style="backdrop-filter: blur(10px);">
<div class="modal-content"></div>
</div>
</div>
必须同步处理的三个隐藏干扰点
光靠 CSS 属性组合还不够，JS 协同才能覆盖全部场景：
- 遮罩显示时，记录
document.body.scrollTop，并设body.style.position = 'fixed'+body.style.top = -scrollTop + 'px'，避免关闭后页面跳动 - 遮罩内所有可聚焦元素（
input、button、textarea）加上scroll-margin: 0，防止focus()触发scrollIntoView - Safari 16.4 以下需手动监听
touchmove：仅当触摸点在遮罩内且内容未滚到顶/底时才preventDefault()；否则放行，保证遮罩内滚动可用
最易被忽略的是：滚动锁定不是单点问题，而是滚动源（touch/mousewheel/keyboard/focus）、滚动目标（body/overlay/iframe）和浏览器渲染管线三者耦合的结果。漏掉任一环节，用户就可能在滑到遮罩边缘时，突然看到背后页面“抽搐”一下。
