网络编程
位置：首页>> 网络编程>> JavaScript>> vue 遮罩层阻止默认滚动事件操作

vue 遮罩层阻止默认滚动事件操作

作者：Pany丨　　发布时间：2024-04-30 08:42:25　

标签：vue,遮罩层,滚动,事件

在写移动端页面的时候,弹出遮罩层后，我们仍然可以滚动页面。

vue中提供 @touchmove.prevent 方法可以完美解决这个问题

<div class="dialog" @touchmove.prevent ></div>

如果不是使用Vue的话，可以给body添加overflow:hidden属性解决

补充知识：vue项目中禁止页面滚动 / 滚动事件穿透 (弹出蒙版时，弹出层下面还可以滚动)

vue项目中弹出层时，蒙版下还可以滚动页面。

移动端解决方案

在蒙层所在div上加 @touchmove.prevent

<div class="maskBox" @touchmove.prevent></div>

PC端解决方案

弹层显示时调用 stopMove()停止页面滚动 ，弹层消失时调用 Move()开启页面滚动


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

来源：https://blog.csdn.net/panyang01/article/details/75663677

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com