vue 遮罩层阻止默认滚动事件操作
在写移动端页面的时候,弹出遮罩层后，我们仍然可以滚动页面。
vue中提供@touchmove.prevent方法可以完美解决这个问题
如果不是使用Vue的话，可以给body添加overflow:hidden属性解决
补充知识：vue项目中禁止页面滚动/滚动事件穿透(弹出蒙版时，弹出层下面还可以滚动)
vue项目中弹出层时，蒙版下还可以滚动页面。
移动端解决方案
在蒙层所在div上加@touchmove.prevent
PC端解决方案
弹层显示时调用stopMove()停止页面滚动，弹层消失时调用Move()开启页面滚动
//停止页面滚动
stopMove(){
letm=function(e){e.preventDefault();};
document.body.style.overflow='hidden';
document.addEventListener("touchmove",m,{passive:false});//禁止页面滑动
},
//开启页面滚动
Move(){
letm=function(e){e.preventDefault();};
document.body.style.overflow='';//出现滚动条
document.removeEventListener("touchmove",m,{passive:true});
}
以上这篇vue遮罩层阻止默认滚动事件操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。