在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 相关文章推荐
jquery实现点击弹出层效果的简单实例
Mar 03 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
Jun 06 Javascript
高效利用Angular中内置服务$http、$location等
Mar 22 Javascript
Vuejs第十二篇之动态组件全面解析
Sep 09 Javascript
JavaScript获取中英文混合字符串长度的方法示例
Feb 04 Javascript
bootstrap警告框示例代码分享
May 17 Javascript
vue2.0 keep-alive最佳实践
Jul 06 Javascript
AngularJS 实现购物车全选反选功能
Oct 24 Javascript
Vue配合iView实现省市二级联动的示例代码
Jul 27 Javascript
layui 监听表格复选框选中值的方法
Aug 15 Javascript
vue如何安装使用Quill富文本编辑器
Sep 21 Javascript
解决Vue 移动端点击出现300毫秒延迟的问题
Jul 21 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
phpMyAdmin 安装教程全攻略
2007/03/19 PHP
PHP单例模式数据库连接类与页面静态化实现方法
2019/03/20 PHP
Laravel+Intervention实现上传图片功能示例
2019/07/09 PHP
Javascript实例教程(19) 使用HoTMetal(1)
2006/12/23 Javascript
Javascript !!的作用
2008/12/04 Javascript
JavaScript Event学习补遗 addEventSimple
2010/02/11 Javascript
js 文件引入实现代码
2010/04/23 Javascript
js 编程笔记 无名函数
2011/06/28 Javascript
基于JQuery的抓取博客园首页RSS的代码
2011/12/01 Javascript
js动态给table添加/删除tr的方法
2013/08/02 Javascript
深入理解javascript的执行顺序
2014/04/04 Javascript
javascript实现表单提交后,提交按钮不可用的方法
2015/04/18 Javascript
7个有用的jQuery代码片段分享
2015/05/19 Javascript
jQuery垂直多级导航菜单代码分享
2015/08/18 Javascript
json对象与数组以及转换成js对象的简单实现方法
2016/06/24 Javascript
浅谈react 同构之样式直出
2017/11/07 Javascript
jQuery操作选中select下拉框的值代码实例
2020/02/07 jQuery
如何使用原生Js实现随机点名详解
2021/01/06 Javascript
python 字典(dict)遍历的四种方法性能测试报告
2014/06/25 Python
基于python实现的抓取腾讯视频所有电影的爬虫
2016/04/22 Python
总结python爬虫抓站的实用技巧
2016/08/09 Python
Python 查找list中的某个元素的所有的下标方法
2018/06/27 Python
python 含子图的gif生成时内存溢出的方法
2019/07/07 Python
使用 Supervisor 监控 Python3 进程方式
2019/12/05 Python
python用pip install时安装失败的一系列问题及解决方法
2020/02/24 Python
装上这 14 个插件后,PyCharm 真的是无敌的存在
2021/01/11 Python
解决CSS3 transition-delay 属性默认值0不带单位失效的问题
2020/10/29 HTML / CSS
HTML5对比HTML4的主要改变和改进总结
2016/05/27 HTML / CSS
Big Green Smile德国网上商店:提供各种天然产品
2018/05/23 全球购物
PHP中如何使用Cookie
2015/10/28 面试题
中班幼儿评语大全
2014/04/30 职场文书
仓库管理员岗位职责
2015/02/03 职场文书
居委会工作总结2015
2015/05/18 职场文书
入伍志愿书怎么写?
2019/07/19 职场文书
零基础学java之方法的定义与调用详解
2022/04/10 Java/Android
JavaScript设计模式之原型模式详情
2022/06/21 Javascript