微信小程序 - 解决弹框遮罩层的滚动穿透问题_微信小程序页面背景会流动-CSDN博客

本文链接：https://blog.csdn.net/qq_36206799/article/details/126893777

当在微信小程序中遇到弹窗开启时底部背景页面也跟随滚动的bug，本文提供了三种解决方案。方法1是通过catchtouchmove属性阻止背景滚动，但可能影响弹框内滚动；方法2是利用scroll-view包裹内容区，确保背景在弹窗出现时不滚动；方法3是弹窗显示时调整页面高度为100vh，隐藏溢出内容。每种方法都有其适用场景和效果，可根据实际需求选择。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

在小程序页面里有自定义弹窗时候，发现弹窗外滚动的时候，底部背景页面也会跟随滚动。面对这个bug，我们可以用下面几种方法实现：

方法1：catchtouchmove=“true”

可以实现弹框背景不滚动，但是也会导致弹框自身无法滚动。
如果你的弹窗本身是不需要滚动的，用这个方法是极佳的。
ps：开发工具测试无效，真机上有效

<!-- 页面 -->
<view class="page">
    <button bindtap="showAction">点击出现弹框</button>
</view>

<!-- 弹框 -->
<view catchtouchmove="true">
  <view class="mask" wx:if="{{popup}}"></view>
  <view class="half-screen-dialog {{popup?'half-screen-dialog_show':''}}"></view>
</view>

.page {
  width: 100%;
  height: 20000rpx;
  background-color: pink;
}

方法2：使用scroll-view包裹底部内容区

<!-- 页面 -->
<scroll-view class="page" scroll-y="{{true}}" scroll-x="{{false}}" enhanced="{{true}}" bounces="{{false}}">
  <view style="height: 3000rpx;background: green;">
    <button bindtap="showAction">点击出现弹框</button>
  </view>
</scroll-view>

<!-- 弹框 -->
<view>
  <view class="mask" wx:if="{{popup}}"></view>
  <view class="half-screen-dialog {{popup?'half-screen-dialog_show':''}}">
    <view style="height: 3000rpx;background: red;"></view>
  </view>
</view>

.page {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow-y: auto;
}

方法3：弹框出现的时候，将底部背景页面的高度设置为100vh

<!-- 页面 -->
<view class="{{popup ? 'page-overflow-hidden' : ''}}">
  <view style="height: 3000rpx;background: green;">
    <button bindtap="showAction">点击出现弹框</button>
  </view>
</view>

<!-- 弹框 -->
<view>
  <view class="mask" wx:if="{{popup}}"></view>
  <view class="half-screen-dialog {{popup?'half-screen-dialog_show':''}}">
    <view style="height: 3000rpx;background: red;"></view>
  </view>
</view>

.page-overflow-hidden {
  height: 100vh;
  overflow: hidden;
}

相同的弹框样式如下：

.mask {
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
}

.half-screen-dialog {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 75%;
  z-index: 5000;
  line-height: 1.4;
  background-color: #FFFFFF;
  border-top-left-radius: 24rpx;
  border-top-right-radius: 24rpx;
  overflow-y: auto;
  transition: transform .3s;
  transform: translateY(100%);
}

.half-screen-dialog_show {
  transform: translateY(0%);
}

相同的js如下：

Page({
  data: {
    popup: false
  },
  showAction() {
    this.setData({
      popup: true
    });
  },
})