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

如果弹层没有滚动条

在标签上加catchtouchmove="true"即可，如果有加这个会导致弹窗里面的内容不能滚动

<view catchtouchmove="true"></view>

如果弹层有滚动条

1.在弹出层出现的时候给底部的containerView加上一个class 消失的时候移除

<view class="{{showModalView?'tripList_root':''}}">
.tripList_root{
    top:0px;
    left: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: fixed;
    z-index: 0;
}
或者用
.scroll-lock. {
    height: 100%;
    overflow-y: hidden;
}

尝试了如果底部是scroll-view并有scroll-view的下拉加载事件时 ，部分ios手机还是会出现穿透的问题，而且在取消了该class后，页面自动滚动回页面顶部

2.在弹窗时给 scroll-view 标签的 scroll-y 的属性设为 false，但是还是会触发页面的上拉或下拉留白，我尝试给json文件增加"enablePullDownRefresh": false, "disableScroll": true,还增加了

onPageScroll: function (e) {
    if (e.scrollTop < 0) {
      wx.pageScrollTo({
        scrollTop: 0
      })
    }
  },

缺点在当遇到页面内容有 textarea 等原生组件时，页面就错乱了

3.这种第二种好用

1.整个布局用作为根节点包裹所有view，并动态绑定scroll-view的scroll-y属性

2.样式文件中设置Page的overflow-y属性值为hidden

3.样式文件中设置scroll-view的height属性值为100%

4.打开自定义弹窗的点击事件中，更改isScroll的值为false，关闭弹窗的点击事件中，更改isScroll的值为true

如果底层可以不用scroll-view,代码如下只需要在弹窗时，给 page-inner 添加 overflow:hidden 属性即可

<page>
  <view ckass="page-inner">
    超长底部内容
    <view>弹窗超长内容</view>
  </view>
</page>

page {
  overflow:hidden;
  height: 100%;
}
.page-inner {
  overflow:auto;
  height: 100vh;// 重点
}

注意：这将会导致 onPageScroll 失效，如果有页面需要用到 onPageScroll 请在该页面添加一下代码

/** 清除滚动禁止代码 start **/
page,.container{
  height: auto;
  overflow: auto;
}
/** 清除滚动禁止代码 ent **/