在vue中实现禁止屏幕滚动,禁止屏幕滑动


Posted in Javascript onJuly 22, 2020

今天写了一个Vue弹层组件,用来全屏查看图片的,大概是下面这么一个效果:

在vue中实现禁止屏幕滚动,禁止屏幕滑动

其中背景是透明色的,但是弹出这个组件时手指滑动、鼠标滚轮滑动,底部页面是会动。

作为自己开发的一个常用的组件,这种bug当然是要解决的。

于是学艺不精的我在网上找了蛮久的,看了不少博客,看了不少观点和方法。终于找到了一个最简单、最实在的方法,

代码如下:

<div class="magnify" v-show="isShow" @click.self="hide" @touchmove.prevent @mousewheel.prevent>
...
</div>

首先,这个div就是整个遮罩组件的根组件,核心就是div上的事件绑定。

@touchmove 是触摸移动事件

@mousewheel 是鼠标滚轮事件

而加了prevent事件后缀,相信大家都知道是阻止默认事件。

当组件在屏幕最上方显示时,触摸移动事件和鼠标滚轮都被阻止了,所以页面不会再滚动。

在网上也看到了很多给body添加事件的解决方法:

function bodyScroll(event){ 
 event.preventDefault(); 
} 

document.body.addEventListener('touchmove',bodyScroll,false);

这里就不说了,网上有很多,我也没用上,所以没有验证,如果是传统页面的,可以使用一下这种方法。

好了,菜鸟要继续去学习了。。。

补充知识:VUE2.0 实现移动端在固定区域内的滚动效果

1.开发工具:微信web开发者工具;

2.项目:嵌在APP中的一个活动,活动是H5页面,使用VUE2.0框架。

3.需求,直接上截图:

在vue中实现禁止屏幕滚动,禁止屏幕滑动

item 上拉滚动到底部,遮罩层部分消失;item下拉,遮罩层部分显示。

4.代码:

HTML:

遮罩层部分与滚动区域部分是平级

<template>
 <div id="selectGoods">
 <!--item列表区域-->
 <div class="goods-area" ref="box">
  <div class="goods-list" ref="item" v-for="(item,index) in items" >
  <img class="left-img" :src="item.goodsUrl" alt="">
  <div class="right-text">
   <span class="inviter-goods">{{item.resourceName}}</span> <br>
   <span class="invitee-rules"><span class="person-num">{{item.inviteResourceId}}</span>我是右侧文本第二行</span>
  </div>
  </div>
 </div>
 <!--列表底部遮罩层-->
 <div class="bottom-mask" v-show="bottomMaskShow">
  <img class="mask-img" src="../../../static/inviteFriends/goodsListMask.png" alt="">
  <img class="bottom-triangle" src="../../../static/inviteFriends/xiasanjiao.png" alt="">
 </div>
 </div>
</template>

CSS(重点):

.goods-area{
 height:8.58rem;
 overflow-x: hidden;  /* 解决左右可以滑动的问题 */
 overflow-y: auto;  /* 解决左右可以滑动的问题 */
 overflow-scrolling: touch; /*兼容性 ios5+、android4+ */
}

JS:

this.$refs.是VUE2.0新增的一个对象,不需要使用JS原生的获取DOM节点的方法,直接在元素上绑定ref,如上,<div ref = "box">,然后再JS中直接调用 this.$refs.box 就可以直接获取。另外,感兴趣的小伙伴可以看一下,console.log(this.$refs.item)的结果。

回归本文主题,vue2.0 中的 mounted 方法,是页面加载后调用方法的地方。这还牵扯到另外一个问题就是VUE的钩子函数(后续工作中有了更深入的体会结合自己的实际项目再写一篇)。

页面加载后,监听滚动区域的 scroll 事件,调用 onScroll 方法,根据滚动的尺寸判断是否已经滚动到底部,控制遮罩层的显示和隐藏。

mounted () {
 this.$refs.box.addEventListener('scroll', this.onScroll);
},
onScroll () { //onScroll方法放在methods:{}中
 let nScrollHeight = this.$refs.box.scrollHeight; // 滚动距离总长 内部div的高度
 let nScrollTop = this.$refs.box.scrollTop; // 滚动条(点)当前的位置在内部div的高度 里占多少
 let itemHeight = nScrollHeight / (this.items.length); // 可以理解为每一个item的高度
 let scrollLength = itemHeight * (this.items.length - 4); // 默认显示4个item
 this.bottomMaskShow = true;
 if (nScrollTop > (scrollLength -49)) { // 49 这个差值比较灵活,是根据项目中打印出来的item高度和scrollTop实际滚动(出去)的值对比得出的
 this.bottomMaskShow = false;
 } else
 if(nScrollTop <= (scrollLength -49)){ 
 this.bottomMaskShow = true;
 }
}

其实这个功能没有什么难点,但是自己在这个问题上纠缠了好长时间,在移动端的效果总是不理想,原因在于,在一开始自己就进入了一个误区,认为在微信的开发工具上打印出来的 scrollTop 跟手机上打印出来的是一样的,结果是,完全不一样,手机根据尺寸的大小scrollTop的值也是不一样的。

写在最后:

1.对于移动端的适配问题,灵活,以不变应万变;

2.遇到问题,想想那些点都是“你以为的”,可能就是这些“你以为的”出了问题;

以上这篇在vue中实现禁止屏幕滚动,禁止屏幕滑动就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascrip客户端验证文件大小及文件类型并重置上传
Jan 12 Javascript
解决jquery的datepicker的本地化以及Today问题
May 23 Javascript
JQuery表格内容过滤的实现方法
Jul 05 Javascript
jQuery如何取id有.的值一般的方法是取不到的
Apr 18 Javascript
用js替换除数字与逗号以外的所有字符的代码
Jun 07 Javascript
JS给Textarea文本框添加行号的方法
Aug 20 Javascript
js判断上传文件后缀名是否合法
Jan 28 Javascript
详解jQuery事件
Jan 13 Javascript
详解在Angular项目中添加插件ng-bootstrap
Jul 04 Javascript
解决vue attr取不到属性值的问题
Sep 18 Javascript
vue-router命名视图的使用讲解
Jan 19 Javascript
详解element-ui日期时间选择器的日期格式化问题
Apr 08 Javascript
vue 弹出遮罩层样式实例
Jul 22 #Javascript
vue中解决拖拽改变存在iframe的div大小时卡顿问题
Jul 22 #Javascript
vue中实现拖动调整左右两侧div的宽度的示例代码
Jul 22 #Javascript
在vue中实现禁止回退上一步,路由不存历史记录
Jul 22 #Javascript
vue项目中使用多选框的实例代码
Jul 22 #Javascript
vue中el-input绑定键盘按键(按键修饰符)
Jul 22 #Javascript
解决VUE-Router 同一页面第二次进入不刷新的问题
Jul 22 #Javascript
You might like
学习YUI.Ext第五日--做拖放Darg&amp;Drop
2007/03/10 Javascript
ejs v9 javascript模板系统
2012/03/21 Javascript
extjs3 combobox取value和text案例详解
2013/02/06 Javascript
在JS数组特定索引处指定位置插入元素的技巧
2014/08/24 Javascript
JavaScript中九种常用排序算法
2014/09/02 Javascript
基于jquery实现的自动补全功能
2015/03/12 Javascript
详细分析JavaScript变量类型
2015/07/08 Javascript
JavaScript实现的伸展收缩型菜单代码
2015/10/14 Javascript
jQuery实现元素拖拽并cookie保存顺序的方法
2016/02/20 Javascript
JavaScript 实现的checkbox经典实例分享
2016/10/16 Javascript
Bootstrap Modal遮罩弹出层代码分享
2016/11/21 Javascript
JavaScript使用Ajax上传文件的示例代码
2017/08/10 Javascript
shiro授权的实现原理
2017/09/21 Javascript
promise和co搭配生成器函数方式解决js代码异步流程的比较
2018/05/25 Javascript
如何用Node写页面爬虫的工具集
2018/10/26 Javascript
Vue内部渲染视图的方法
2019/09/02 Javascript
在react项目中使用antd的form组件,动态设置input框的值
2020/10/24 Javascript
[03:55]2016国际邀请赛中国区预选赛首日TOP10精彩集锦
2016/06/27 DOTA
Python字符转换
2008/09/06 Python
Python利用多进程将大量数据放入有限内存的教程
2015/04/01 Python
Python使用xlrd模块操作Excel数据导入的方法
2015/05/26 Python
使用简单工厂模式来进行Python的设计模式编程
2016/03/01 Python
Python 实现文件读写、坐标寻址、查找替换功能
2019/09/11 Python
python  logging日志打印过程解析
2019/10/22 Python
python GUI库图形界面开发之PyQt5信号与槽机制、自定义信号基础介绍
2020/02/25 Python
Python接口测试环境搭建过程详解
2020/06/29 Python
Mio Skincare英国官网:身体紧致及孕期身体护理
2018/08/19 全球购物
Beauty Expert美国/加拿大:购买奢侈美容产品
2018/12/05 全球购物
小学体育教学反思
2014/01/31 职场文书
服务员岗位责任制
2014/02/11 职场文书
采购意向书范本
2014/03/31 职场文书
2014年个人业务工作总结
2014/11/17 职场文书
北大自主招生自荐信
2015/03/04 职场文书
2016年党员读书月活动总结
2016/04/06 职场文书
浅谈Go语言多态的实现与interface使用
2021/06/16 Golang
vue的项目如何打包上线
2022/04/13 Vue.js