vue 遮罩层阻止默认滚动事件操作
更新时间：2020年07月28日 09:44:01 作者：Pany丨
这篇文章主要介绍了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 });
}
以上这篇vue 遮罩层阻止默认滚动事件操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue-router懒加载速度缓慢问题及解决方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-11-11
在Vue中,深度监听是一种非常常见且重要的功能,它可以让我们监听对象内部的所有属性,并对这些属性的变化做出相应的处理,在本篇博客中,我将为大家介绍Vue中如何实现深度监听的方法,需要的朋友可以参考下2024-09-09
本文的初衷是想让更多哎学习的人知道并了解vue模版编译，所以文中主要以阶段流程为主，不会涉及过多的底层代码逻辑,需要的朋友可以参考一下2021-09-09
这篇文章主要介绍了vue的状态更新方式(异步更新解决)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了Vue 自定义标签的src属性不能使用相对路径的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
这篇文章主要介绍了Vue中子组件向父组件传值$emit、.sync的方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-09-09
这篇文章主要介绍了vue基础ESLint Prettier配置教程详解，本文使用VsCode + Vue + ESLint + Prettier 实现代码格式规范 + 保存自动修复代码js+vue2022-07-07
下面小编就为大家分享一篇vue element-ui table表格滚动加载方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了VUE使用router.push实现页面跳转和传参方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-01-01
这篇文章主要介绍了vue中echarts图表大小适应窗口大小且不需要刷新案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
最新评论