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


Posted in Javascript onJuly 28, 2020

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

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 遮罩层阻止默认滚动事件操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript的类型简单说明
Sep 03 Javascript
window.location.hash 使用说明
Nov 08 Javascript
jquery删除指定的html标签并保留标签内文本内容的方法
Apr 02 Javascript
浅析node.js中close事件
Nov 26 Javascript
基于jQuery实现Div窗口震动特效代码-代码简单
Aug 28 Javascript
AngularJS控制器继承自另一控制器
May 09 Javascript
几句话带你理解JS中的this、闭包、原型链
Sep 26 Javascript
JavaScript获取tr td 的三种方式全面总结(推荐)
Aug 15 Javascript
详解基于Vue-cli搭建的项目如何和后台交互
Jun 29 Javascript
详解javascript replace高级用法
Feb 17 Javascript
JS大坑之19位数的Number型精度丢失问题详解
Apr 22 Javascript
vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作
Sep 10 Javascript
JavaScript实现沿五角星形线摆动的小圆实例详解
Jul 28 #Javascript
处理JavaScript值为undefined的7个小技巧
Jul 28 #Javascript
vue中touch和click共存的解决方式
Jul 28 #Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
Jul 28 #Javascript
JavaScript中window和document用法详解
Jul 28 #Javascript
vue中echarts引入中国地图的案例
Jul 28 #Javascript
vue 监听窗口变化对页面部分元素重新渲染操作
Jul 28 #Javascript
You might like
smarty的保留变量问题
2008/10/23 PHP
解析PHP汉字转换拼音的类
2013/06/18 PHP
PHP删除HTMl标签的三种解决方法
2013/06/30 PHP
php生成高清缩略图实例详解
2015/12/07 PHP
Yii2实现ajax上传图片插件用法
2016/04/28 PHP
PHP封装返回Ajax字符串和JSON数组的方法
2017/02/17 PHP
学习YUI.Ext 第三天
2007/03/10 Javascript
刷新时清空文本框内容的js代码
2007/04/23 Javascript
jquery鼠标滑过提示title具体实现代码
2013/08/06 Javascript
Javascript执行效率全面总结
2013/11/04 Javascript
jquery常用函数与方法汇总
2015/09/01 Javascript
jQuery模仿京东/天猫商品左侧分类导航菜单效果
2016/06/29 Javascript
如何提高数据访问速度
2016/12/26 Javascript
JavaScript实现淘宝京东6位数字支付密码效果
2018/08/18 Javascript
浅谈使用nodejs搭建web服务器的过程
2020/07/20 NodeJs
vue实现简易图片左右旋转,上一张,下一张组件案例
2020/07/31 Javascript
python列表去重的二种方法
2014/02/14 Python
复习Python中的字符串知识点
2015/04/14 Python
Python多进程机制实例详解
2015/07/02 Python
python使用 HTMLTestRunner.py生成测试报告
2017/10/20 Python
Python用sndhdr模块识别音频格式详解
2018/01/11 Python
Python3日期与时间戳转换的几种方法详解
2019/06/04 Python
python 绘制拟合曲线并加指定点标识的实现
2019/07/10 Python
Python如何向SQLServer存储二进制图片
2020/06/08 Python
Python高阶函数与装饰器函数的深入讲解
2020/11/10 Python
德国宠物用品、宠物食品及水族馆网上商店:ZooRoyal
2017/07/09 全球购物
英国领先的隐形眼镜在线供应商:Lenstore.co.uk
2019/11/24 全球购物
SQL注入攻击的种类有哪些
2013/12/30 面试题
软件配置管理有什么好处
2015/04/15 面试题
DIY蛋糕店的创业计划书范文
2013/12/26 职场文书
经济信息系毕业生自荐信
2014/06/02 职场文书
银行党的群众路线教育实践活动对照检查材料
2014/09/25 职场文书
个人简历求职信范文
2015/03/20 职场文书
入党自传范文2015
2015/06/26 职场文书
Django给表单添加honeypot验证增加安全性
2021/05/06 Python
Python标准库之typing的用法(类型标注)
2021/06/02 Python