移动端弹窗打开后怎么防止背景滚动穿透？

UI子骞提问于 2026-03-22 19:48:21 阅读 55

优化

我在做移动端页面时，点击按钮弹出一个 fixed 定位的弹窗，但发现手指在弹窗上滑动时，底下的页面还是会跟着滚动，这体验太差了。

试过给 body 加 overflow: hidden，但在 iOS 上完全没用，页面照样能滚。有没有靠谱的解决方案？是不是还要监听 touchmove 事件？

目前弹窗结构大概是这样：

<div class="modal">
  <div class="modal-content">内容</div>
</div>

滚动穿透移动端优化

我来解答赞 8 收藏

反馈

2 条解答

宝玲（打工版） Lv1

最简单的办法就是给 body 加个 class 然后设置 overflow 和 touch-action，再在弹窗打开时阻止默认事件。代码给你：



body.modal-open {

  overflow: hidden;

  touch-action: none;

}

然后 JS 这样写：



document.querySelector('.modal').addEventListener('touchmove', function(e) {

  e.preventDefault();

}, { passive: false });

记得在关闭弹窗时把 class 移除掉就完事了。这个方法 iOS 和安卓都兼容。

2026-03-27 10:07

Mc.艳杰 Lv1

复制这个代码，解决 iOS 上的背景滚动穿透问题：

document.addEventListener('touchmove', function (e) {

    if (document.querySelector('.modal').classList.contains('active')) {

        e.preventDefault();

    }

}, { passive: false });

记得给弹窗加个 active 类来控制显示状态。这样在弹窗显示时阻止默认的滚动行为。

2026-03-22 20:00