【转】手机端JS弹出遮罩层后底部页面不滚动实现

原文：https://blog.csdn.net/letasian/article/details/78131665

//弹层CSS代码
.paydiv{
    position: fixed;
    left: 0;
    top:0;
    right:0;
    bottom:0;
    z-index: 100;  
    background: rgba(0, 0, 0, 0.8);
}

外面层

//外层包裹层CSS代码，缺一不可
.paydiv-wrapper{
    width:100%;
    height: 100%;
    overflow: auto;    //这里overflow:scroll也可以
}

 

这时候打开安卓手机一看，不错，完美。

但打开iphone，滑动还是一个样，底下依然会滑动。

第一个想法是把滑动事件给取消掉，试了一下。

// 添加事件：(touchmove)="wrapTouchmove($event)"
<div class="modal-wrapper" (touchmove)="wrapTouchmove($event)">
  <div class="zoom-modal-wrap w-screen h-screen z-30" (click)="closeModal()">
   <img [src]="imgPath" />
  </div>
</div>

// js

wrapTouchmove(event: MouseEvent) {
    event.preventDefault();
    event.stopPropagation();
  }

 

搞定 收工