html 弹窗禁止页面滑动,JavaScript实现移动端弹窗后禁止滚动

代码如下

computed:{

popupStatus(){

return this.SendCircle_visible || this.generateInfo_visible || this.isPosterShow;

}

},

methods:{

stopTouch(e){

e.preventDefault();

},

},

watch: {

popupStatus(val) {

let preD = this.stopTouch;

let options = {

passive: false, //强调默认事件

capture: true, //早点禁止该事件

};

if (val) {

document.body.style.overflow = 'hidden';

document.addEventListener('touchmove', preD, options); // 禁止页面滑动

} else {

document.body.style.overflow = ''; // 出现滚动条

document.removeEventListener('touchmove', preD, options);

}

}

}

配置说明

addEventListener目前第三个参数可以为布尔值或对象

addEventListener(type, listener[, useCapture ])

addEventListener(type, listener[, options ])

为对象时默认配置如下

capture: false

passive: false

once: false

其中 capture 属性等价于以前的 useCapture 参数；once 属性就是表明该监听器是一次性的，执行一次后就被自动 removeEventListener 掉。

passive是因为浏览器无法预先知道一个监听器会不会调用 preventDefault()，只有等监听器执行完后再去执行默认行为，因此就会导致页面卡顿。而一旦passive为true，浏览器就可以直接执行默认行为而不等待。此时即使调用了 preventDefault() 也不会生效。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。