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 相关文章推荐
070823更新的一个[消息提示框]组件 兼容ie7
Aug 29 Javascript
JsRender for index循环索引用法详解
Oct 31 Javascript
jquery滚动到顶部底部代码
Apr 20 Javascript
JS轮播图中缓动函数的封装
Nov 25 Javascript
Vue自定义指令详解
Jul 28 Javascript
vue利用axios来完成数据的交互
Mar 23 Javascript
Babel 入门教程学习笔记
Jun 13 Javascript
详解基于vue-cli3快速发布一个fullpage组件
Mar 08 Javascript
微信小程序全局变量GLOBALDATA的定义和调用过程解析
Sep 23 Javascript
vue移动端模态框(可传参)的实现
Nov 20 Javascript
js实现踩五彩块游戏
Feb 08 Javascript
Vue实现仿iPhone悬浮球的示例代码
Mar 13 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
Get或Post提交值的非法数据处理
2006/10/09 PHP
我用php+mysql写的留言本
2006/10/09 PHP
PHP实现的最大正向匹配算法示例
2017/12/19 PHP
php把字符串指定字符分割成数组的方法
2018/03/12 PHP
Extjs学习笔记之五 一个小细节renderTo和applyTo的区别
2010/01/07 Javascript
不使用中间变量,交换int型的 a, b两个变量的值。
2010/10/29 Javascript
jquery分页插件AmSetPager(自写)
2013/04/15 Javascript
Js实现当前点击a标签变色突出显示其他a标签回复原色
2013/11/27 Javascript
ExtJs中gridpanel分组后组名排序实例代码
2013/12/02 Javascript
thinkphp 表名 大小写 窍门
2015/02/01 Javascript
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
2018/10/26 Javascript
微信小程序上传多图到服务器并获取返回的路径
2019/05/05 Javascript
Python3实现从文件中读取指定行的方法
2015/05/22 Python
Python实现比较两个列表(list)范围
2015/06/12 Python
Python 调用Java实例详解
2017/06/02 Python
使用python爬虫获取黄金价格的核心代码
2018/06/13 Python
Python 迭代,for...in遍历,迭代原理与应用示例
2019/10/12 Python
使用python客户端访问impala的操作方式
2020/03/28 Python
纯css3实现的鼠标悬停动画按钮
2014/12/23 HTML / CSS
使用HTML5在网页中嵌入音频和视频播放的基本方法
2016/02/22 HTML / CSS
西班牙土拨鼠床垫公司,感觉在云端:Marmota
2019/03/18 全球购物
Columbia Sportswear法国官网:全球户外品牌
2020/09/25 全球购物
UNOde50美国官网:西班牙珠宝品牌
2020/08/15 全球购物
仓库理货员岗位职责
2013/12/18 职场文书
回门宴答谢词
2014/01/13 职场文书
员工试用期考核自我鉴定
2014/04/13 职场文书
微笑面对生活演讲稿
2014/05/13 职场文书
应届毕业生求职信范文
2014/07/07 职场文书
规范化管理年活动总结
2014/08/29 职场文书
2014年领导班子专项整治整改方案
2014/09/28 职场文书
大学生迟到检讨书500字
2014/10/17 职场文书
暑假社会实践证明格式
2014/10/28 职场文书
2014年护理部工作总结
2014/11/14 职场文书
医德医风个人总结
2015/02/28 职场文书
2016年大学自主招生自荐信范文
2015/03/24 职场文书
2015暑期爱心支教策划书
2015/07/14 职场文书