在小程序页面里有自定义弹窗时候，发现弹窗外滚动的时候，底部背景页面也会跟随滚动。面对这个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});},})
