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

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

优化

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

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

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

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

滚动穿透移动端优化

我来解答赞 2 收藏

反馈

1 条解答

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