在移动端中,由于机型的不同,往往在弹窗的时候会出现页面的穿透事件,使得原页面还是能够进行滑动,这是我们不想看到的效果。
前提
html,body{
height: 100%;
height: 100vh;
}
首先,建立一个函数
function bodyScroll(event){
event.preventDefault();
}
之后在触发弹窗的时候禁止页面滚动
document.body.addEventListener('touchmove',bodyScroll,false);
$('body').css({'position':'fixed',"width":"100%"});
关闭弹框时开启页面滚动
document.body.removeEventListener('touchmove',bodyScroll,false);
$("body").css({"position":""});
注意:切不可以下写法
document.body.addEventListener('touchmove', function (event) {
event.preventDefault();
},false);
document.body.removeEventListener('touchmove', function (event) {
event.preventDefault();
},false);
方法二:
mounted() {
this.scrollTop = document.documentElement.scrollTop
|| window.pageYOffset
|| document.body.scrollTop;
document.body.style.position = 'fixed';
document.body.style.top = `${-this.scrollTop}px`;
},
beforeDestroy() {
document.body.style.position = '';
document.body.style.top = '';
window.scrollTo(0, this.scrollTop); // 回到原先的top
},