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

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

使用前后对比

 .        

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

可以在遮罩的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;
}
原文地址:https://www.cnblogs.com/cap-rq/p/10019682.html