移动端H5弹窗“滚动穿透”的终极解决方案：为什么 overflow: hidden 没用？

移动端弹窗"滚动穿透"的终极解决方案：为什么 overflow: hidden 没用？

在移动端 H5 开发中，"滚动穿透"（Scroll Chaining / Ghost Scroll）绝对是让无数前端开发者血压升高的经典 Bug 之一。

什么是"滚动穿透"？

场景很简单：

1. 你打开了一个全屏弹窗（Modal/Popup）。
2. 弹窗下面有一层长列表背景。
3. 当你在弹窗上滑动手指时，底下的背景页面竟然跟着一起滚动了！

这不仅体验极差，还容易导致弹窗错位或用户迷失上下文。

常见误区：以为 CSS 就能搞定

大多数人的第一反应是："这还不简单？给 body 加个 overflow: hidden 不就行了？"

/* ❌ 只有 PC 端有效，移动端经常翻车 */ body.modal-open { overflow: hidden; }为什么失效？ 在 PC 端，overflow: hidden 确实能隐藏滚动条并禁止滚动。但在移动端（特别是 iOS Safari），浏览器认为 body 的滚动是"视口（Viewport）"级别的特性。即使你禁用了 body 的溢出，用户手指在屏幕上拖拽（Touch Events）时，浏览器依然会触发默认的滚动行为，甚至引发橡皮筋效果。

进阶方案：阻止 touchmove（有副作用）

第二种常见的方案是直接阻止弹窗遮罩层的触摸事件：

// ❌ 这种一刀切的方案会导致弹窗内部也无法滚动 modal.addEventListener('touchmove', (e) => { e.preventDefault(); }, { passive: false });

局限性： 如果你的弹窗内部本身就需要滚动（比如一个长长的语言选择列表），这行代码会把弹窗内部的滚动也一并杀掉，导致"死锁"。虽然可以通过判断 target 来优化，但逻辑非常繁琐。

终极解决方案：Body 固定定位法（Position Fixed）

目前业界（包括 Ant Design Mobile, Vant 等主流组件库）公认的最稳妥方案，就是**"Body 固定定位法"**。

核心原理

既然禁止滚动失效，那我们就从物理上切断滚动的可能 。 当弹窗打开时，我们将 body 设置为 position: fixed。一个固定定位的元素，天然就是死死钉在屏幕上的，无论你怎么滑，它都不可能动。

带来的新问题：页面跳顶

单纯设置 position: fixed 会导致一个严重的副作用：页面会瞬间跳回到顶部 。因为脱离文档流后，scrollTop 丢失了。

完整代码实现

为了解决跳顶问题，我们需要在"锁定"前记录当前的滚动位置，并在"解锁"后恢复它。

这正是我们项目 Popup 组件中那段 useEffect 代码的逻辑：

// React Hook 示例

useEffect(() => {
  if (visible) {
    // 1. 🔒 锁定：记录位置并固定 Body
    const scrollTop = window.scrollY || document.documentElement.scrollTop;
    
    document.body.style.position = 'fixed';
    document.body.style.top = `-${scrollTop}px`; // 把页面"拉"回原来的视觉位置
    document.body.style.width = '100%';
    
    // 存起来，一会儿还要用
    document.body.dataset.scrollY = scrollTop.toString();
    
  } else {
    // 2. 🔓 解锁：恢复样式并滚动回去
    const scrollTop = parseInt(document.body.dataset.scrollY || '0', 10);
    
    document.body.style.position = '';
    document.body.style.top = '';
    document.body.style.width = '';
    
    // 恢复滚动位置，让用户无感知
    window.scrollTo(0, scrollTop);
  }
}, [visible]);

代码解析

1. document.body.style.position = 'fixed'：这是核心，强制禁止滚动。
2. top = -${scrollTop}px ：这是精髓。假设你滚到了 500px 的位置，为了防止变为 fixed 后跳回 0px，我们给 body 一个 -500px 的偏移量，视觉上页面就纹丝不动了。
3. window.scrollTo(0, scrollTop)：关闭弹窗时，解除 fixed，此时页面真的回到了 0px，我们必须立即用 JS 把它滚回到之前的 500px，实现无缝衔接。

总结

虽然这段 JS 代码看起来有点"重"，甚至操作了 DOM，但它目前是解决移动端（尤其是 iOS）滚动穿透问题兼容性最好、副作用最小的方案。

下次遇到弹窗滚动穿透，别再纠结 overflow: hidden 了，直接上"Body 固定定位法"吧！

---