跳到主内容

vue弹窗滚动穿透

· 1分钟阅读

思路

在打开弹窗时禁用浏览器的滚动事件,关闭弹窗时开启滚动事件,注意在跳转到别的组件时也要开启滚动事件,具体代码如下:

解决方法

//禁止页面滚动
disableScroll() {
let m = function(e) {
e.preventDefault();
};
document.body.style.overflow = 'hidden';
document.addEventListener("touchmove", m, {
passive: false
});
},
//开启页面滚动
openScroll() {
let m = function(e) {
e.preventDefault();
};
document.body.style.overflow = '';
document.removeEventListener("touchmove", m, {
passive: true
});
}

移动端

<div className="maskDiv" @touchmove.prevent></div>