微信小程序中遮罩层的滚动穿透问题

Question

使用小程序的modal组件实现遮罩层效果时，会出现滚动穿透的问题，即遮罩层后面的页面依旧可以滚动，这个问题有解决办法吗？

Answer 1

我的解决方案是:
添加 catchtouchmove 事件来阻止

    <view wx:if="{{alert}}" catchtouchmove="myCatchTouch">
        <template is="alert" data="{{alertData}}" />
    </view>

  myCatchTouch: function () {
    console.log('stop user scroll it!');
    return;
  },

Answer 2

如果弹出层没有滚动事件，就直接在蒙板上加catchtouchmove="move" move:function(){};

如果弹出层有滚动事件，那么在弹出层出现的时候给底部的containerView加上一个class 消失的时候移除。

<view class="{{showSearchView?'tripList_root':''}}">

.tripList_root{

    top:0px;

    left: 0px;

    width: 100%;

    height: 100%;

    overflow: hidden;

    position: fixed;

    z-index: 0;

}

1. 亲测有效。

Answer 3

弹窗出现时，给最外层view加上

height: 100vh;
overflow: hidden;

Answer 4

有两种方法：在出现遮罩层的时候 ，让你的
content{overflow:hidden}当遮罩层消失的时候移除这个属性

二： 这个是比较彻底的方法， 当弹窗出现的时候， 给body添加固定定位
body{
position:fixed;
top:0;left:0;right:0;bottom:0;
}

这种写法， 只是告诉你思路， 并没有用vue 的方法实现， 你可以写两个class 然后根据弹窗是否出现触发选择器，来改变 class值就行了

Answer 5

在遮罩打开的时候为你的背景容器添加hiddenScroll这个class，然后遮罩关闭后再移除

.hiddenScroll{
    overflow:hidden;
}

Answer 6

说下思路吧,实现这个的大致代码是:

<!--wxml-->
<view class="mask" wx:if="{{hasMask}}">
    我是遮罩层
</view>
<view class="content" style="{{hasMask?'height:100%;overflow:hidden':''}}">
    我是页面内容
</view>
<!-- js -->
Page{
    ...
    showMask(e){
        //显示遮罩
        this.setData({
            hasMask:true
        })
    },
    hideMask(e){
    //隐藏遮罩
        this.setData({
            hasMask:false
        })
    },
}

Answer 7

感觉是坑。至少我没有找到办法取更改 <page> 中的样式。除非不在 <page> 中滚动。

Answer 8

弹出遮罩时给页面内容的标签加个class overflow: hidden样式就可以了、取消遮罩时去掉class

Answer 9

https://www.cnblogs.com/apgy/...
这个方法很好用

给蒙层那个元素加个touchmove事件，这个事件用来阻止事件冒泡，preventD中的代码如下：

　　preventD(){}

　　问题就解决了

Answer 10

page{
   height:100%;
   .hiddenScroll {
     height:100%;
     overflow: hidden;
   }
}

最外层view

<view class="{{ modalHidden ? '' : 'hiddenScroll' }}">

Answer 11

参考这篇文章，https://developers.weixin.qq....
在弹出层的滚动中先将触摸事件阻止冒泡，然后将弹出层的滚动不要写成view和overflow-y:scroll的形式，写成scroll-view组件，并设置y轴滚动，然后，就可以了，有问题私信我

<scroll-view class="area" id="content" scroll-y="{{true}}" >
    <view class="area-item" wx:for="{{10}}">长宁区</view>
</scroll-view>

move(e) {
    console.log(e);
}