本文介绍在移动端开发中，如何通过JavaScript阻止弹窗出现时的页面滚动。核心方案是利用addEventListener的options参数，设置passive为false并开启capture，结合overflow:hidden实现。同时深入解析passive选项对浏览器默认行为执行时机及preventDefault生效的影响，帮助开发者优化交互体验。
移动端弹窗禁止滚动JS实现
具体实现代码如下：
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时，其第三个参数不仅支持布尔值，还可以是一个配置对象。
addEventListener(type, listener[, useCapture ]) addEventListener(type, listener[, options ])
当传入对象时，其默认配置如下所示：
capture: false passive: false once: false
其中，capture属性对应于旧版API中的useCapture参数；而once属性用于指定监听器是否只执行一次，若设为true，则在执行完毕后会自动移除该监听器。
passive选项对默认行为的影响
passive选项的引入是为了解决性能问题。由于浏览器无法预先判断监听器是否会调用preventDefault()，因此必须等待监听器执行完毕后再触发默认行为，这可能导致页面卡顿。若将passive设为true，浏览器将直接执行默认行为而无需等待，此时即使代码中调用了preventDefault()也不会生效。
以上内容即为移动端弹窗禁止滚动的实现原理及相关API详解，希望能为相关开发工作提供参考。