解决小程序弹出层滚动穿透的问题

 最近在做弹窗的时候遇到的问题，就是遮罩后面的内容可以滚动，查找资源发现是两种情况，一是遮罩层有滚动组件，一个是遮罩层没有滚动组件，下面就来说说如何解决这两种情况。

 

使用前后对比

 .        

 

一、当弹出层里面无滚动的时候

可以在遮罩的view标签上定义一个防止事件冒泡的方法：

catchtouchmove="preventD"；
 
preventD() {
    return
}

 

 二、当弹出层有滚动的时候

在弹窗使用是scroll-view，这个时候我们只需要在打开遮罩的时候给最外层（内容）的view标签加上一个class，关闭弹出层的时候把class移除

.no-scroll {
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: fixed;
  z-index: 0;
}