欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-03-08 23:02:10
...

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

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

//弹层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();
  }

 

搞定 收工