解决微信小程序自定义弹窗滚动穿透问题

　康　

已于 2023-06-28 09:04:56 修改

阅读量5.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签：微信小程序

于 2021-05-31 16:46:20 首次发布

本文链接：https://blog.youkuaiyun.com/qq_40047019/article/details/117420339

微信小程序专栏收录该内容

30 篇文章

订阅专栏

本文介绍了在微信小程序中遇到弹窗滚动导致底部背景跟随的问题时，三种解决方案：1) 使用catchtouchmove阻止背景滚动但限制弹窗滚动；2) 通过scroll-view实现弹窗内容滚动而底部内容固定；3) 固定定位避免页面顶部回弹。适合不同场景的需求。

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

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

1、catchtouchmove="true"

可以实现弹框背景不滚动，但是也会导致弹框自身无法滚动。

如果你的弹窗本身是不需要滚动的，用这个方法是极佳的。

<view class="pop" catchtouchmove="true">
    <view class="content"></view>
</view>

2、底部内容区使用scroll-view

设置scroll-view垂直滚动，并将scroll-view的高度设置为屏幕高度，这样就可以实现弹窗自身内容滚动时，而底层内容不滚动。

<scroll-view class="container" scroll-y style="height:{{windowHeight}}px">
    底部内容
</scroll-view>
<view class="pop"></view>

/**
  * 生命周期函数--监听页面加载
  */
 onLoad: function (options) {
    /*获取屏幕高度*/
    this.setData({
      windowHeight: wx.getSystemInfoSync().windowHeight
    })
 },

3、固定定位

当出现弹窗时，为wxml最外层元素动态添加fixed类。

但是这种方式会导致页面自动回到顶部。

.pop.fixed {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}