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 相关文章推荐
js截取字符串的两种方法及区别详解
Nov 05 Javascript
IE6下拉框图层问题探讨及解决
Jan 03 Javascript
Jquery实现侧边栏跟随滚动条固定(兼容IE6)
Apr 02 Javascript
基于jQuery实现表单提交验证
Nov 24 Javascript
jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果
Aug 22 Javascript
JS获取数组最大值、最小值及长度的方法
Nov 24 Javascript
js表单验证实例讲解
Mar 31 Javascript
layer弹出层 iframe层去掉滚动条的实例代码
Aug 17 Javascript
JavaScript设计模式之代理模式实例分析
Jan 16 Javascript
vue axios封装及API统一管理的方法
Apr 18 Javascript
使用next.js开发网址缩短服务的方法
Jun 17 Javascript
vue+element实现动态加载表单
Dec 13 Vue.js
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
php提交表单时判断 if($_POST[submit])与 if(isset($_POST[submit])) 的区别
2011/02/08 PHP
php模拟socket一次连接,多次发送数据的实现代码
2011/07/26 PHP
基于 Swoole 的微信扫码登录功能实现代码
2018/01/15 PHP
js实现页面转发功能示例代码
2013/08/05 Javascript
js实现幻灯片效果(基于jquery插件)
2013/11/05 Javascript
使用JavaScript实现Java的List功能(实例讲解)
2013/11/07 Javascript
LABjs、RequireJS、SeaJS的区别
2014/03/04 Javascript
cocos2dx骨骼动画Armature源码剖析(一)
2015/09/08 Javascript
jQuery实现带动画效果的多级下拉菜单代码
2015/09/08 Javascript
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
2015/10/12 Javascript
javascript简单比较日期大小的方法
2016/01/05 Javascript
用自定义图片代替原生checkbox实现全选,删除以及提交的方法
2016/10/18 Javascript
详解Vue 方法与事件处理器
2017/06/20 Javascript
微信小程序开发之好友列表字母列表跳转对应位置
2017/09/26 Javascript
利用js给datalist或select动态添加option选项的方法
2018/01/25 Javascript
jQuery无冲突模式详解
2019/01/17 jQuery
微信小程序实现获取小程序码和二维码java接口开发
2019/03/29 Javascript
vue实现搜索过滤效果
2019/05/28 Javascript
vue-router之实现导航切换过渡动画效果
2019/10/31 Javascript
浅谈如何优雅处理JavaScript异步错误
2019/11/12 Javascript
JS实现单张或多张图片持续无缝滚动的示例代码
2020/05/10 Javascript
vue+axios 拦截器实现统一token的案例
2020/09/11 Javascript
[01:21]DOTA2 新英雄 森海飞霞
2020/12/18 DOTA
Python编程中字符串和列表的基本知识讲解
2015/10/14 Python
Python获取暗黑破坏神3战网前1000命位玩家的英雄技能统计
2016/07/04 Python
Django项目中包含多个应用时对url的配置方法
2018/05/30 Python
python读取.mat文件的数据及实例代码
2019/07/12 Python
python 获取sqlite3数据库的表名和表字段名的实例
2019/07/17 Python
python 画3维轨迹图并进行比较的实例
2019/12/06 Python
Python字典实现伪切片功能
2020/10/28 Python
Shein英国:女性时尚网上商店
2019/04/10 全球购物
餐厅筹备计划书
2014/04/25 职场文书
活动倡议书范文
2014/05/13 职场文书
甜品店创业计划书
2014/08/14 职场文书
学习社交礼仪心得体会
2016/01/22 职场文书
三下乡活动心得体会
2016/01/23 职场文书