【转】手机端JS弹出遮罩层后底部页面不滚动实现
程序员文章站
2022-03-08 23:02:10
...
原文: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();
}
搞定 收工