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 相关文章推荐
解决FireFox下[使用event很麻烦]的问题
Nov 26 Javascript
JavaScript中的对象化编程
Jan 16 Javascript
Javascript学习笔记1 数据类型
Jan 11 Javascript
jQuery中使用data()方法读取HTML5自定义属性data-*实例
Apr 11 Javascript
页面刷新时记住滚动条的位置jquery代码
Jun 17 Javascript
javascript判断移动端访问设备并解析对应CSS的方法
Feb 05 Javascript
javascript父子页面通讯实例详解
Jul 17 Javascript
JavaScript面向对象之私有静态变量实例分析
Jan 14 Javascript
WebStorm ES6 语法支持设置&amp;babel使用及自动编译(详解)
Sep 08 Javascript
详解Vue结合后台的列表增删改案例
Aug 21 Javascript
解决vue 项目引入字体图标报错、不显示等问题
Sep 01 Javascript
如何在node环境实现“get数据解析”代码实例
Jul 03 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
PHP 字符串分割和比较
2009/10/06 PHP
php使用date和strtotime函数输出指定日期的方法
2014/11/14 PHP
laravel-admin 实现给grid的列添加行数序号的方法
2019/10/08 PHP
JQuery切换显示的效果实例代码
2013/02/27 Javascript
JavaScript限定复选框的选择个数示例代码
2013/08/25 Javascript
node.js中watch机制详解
2014/11/17 Javascript
JS判断字符串包含的方法
2015/05/05 Javascript
webix+springmvc session超时跳转登录页面
2016/10/30 Javascript
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
2017/03/14 Javascript
Node.js连接mongodb实例代码
2017/06/06 Javascript
彻底解决 webpack 打包文件体积过大问题
2017/07/07 Javascript
js表单序列化判断空值的实例
2017/09/22 Javascript
利用vue + element实现表格分页和前端搜索的方法
2017/12/25 Javascript
JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】
2018/05/14 Javascript
针对Vue路由history模式下Nginx后台配置操作
2020/10/22 Javascript
使用Python操作Elasticsearch数据索引的教程
2015/04/08 Python
Python中你应该知道的一些内置函数
2017/03/31 Python
浅析python递归函数和河内塔问题
2017/04/18 Python
python爬虫获取京东手机图片的图文教程
2017/12/29 Python
Python3之读取连接过的网络并定位的方法
2018/04/22 Python
解决Pytorch训练过程中loss不下降的问题
2020/01/02 Python
将matplotlib绘图嵌入pyqt的方法示例
2020/01/08 Python
tensorflow将图片保存为tfrecord和tfrecord的读取方式
2020/02/17 Python
HTML5中的Article和Section元素认识及使用
2013/03/22 HTML / CSS
爱淘宝:淘宝网购物分享平台
2017/04/28 全球购物
大学生军训自我评价分享
2013/11/09 职场文书
环保倡议书
2014/04/14 职场文书
机械工程及自动化专业求职信
2014/09/03 职场文书
中学生的1000字检讨书
2014/10/11 职场文书
2014年人民调解工作总结
2014/12/08 职场文书
2014年企业团支部工作总结
2014/12/10 职场文书
2015年爱国卫生工作总结
2015/04/22 职场文书
2016春季田径运动会广播稿
2015/12/21 职场文书
python爬虫之爬取笔趣阁小说
2021/04/22 Python
Python用any()函数检查字符串中的字母以及如何使用all()函数
2022/04/14 Python
Golang bufio详细讲解
2022/04/21 Golang