在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 相关文章推荐
onpropertypchange
Jul 01 Javascript
js内存泄露的几种情况详细探讨
May 31 Javascript
javascript不可用的问题探究
Oct 01 Javascript
通过url查找a元素并点击
Apr 09 Javascript
JavaScript中标识符提升问题
Jun 11 Javascript
高性能JavaScript 重排与重绘(2)
Aug 11 Javascript
jQuery实现可编辑的表格实例讲解(2)
Sep 17 Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
Apr 01 Javascript
关于cookie的初识和运用(js和jq)
Apr 07 Javascript
JS正则表达式验证账号、手机号、电话和邮箱是否合法
Mar 08 Javascript
mui back 返回刷新页面的实例
Dec 06 Javascript
JS代码编译器Monaco使用方法
Jun 11 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
做个自己站内搜索引擎
2006/10/09 PHP
聊天室php&amp;mysql(四)
2006/10/09 PHP
PHP读写文件的方法(生成HTML)
2006/11/27 PHP
POSIX 风格和兼容 Perl 风格两种正则表达式主要函数的类比(preg_match, preg_replace, ereg, ereg_replace)
2010/10/12 PHP
php下安装配置fckeditor编辑器的方法
2011/03/02 PHP
PHP与MongoDB简介|安全|M+PHP应用实例详解
2013/06/17 PHP
一端时间轮换的广告
2006/06/26 Javascript
js 有框架页面跳转(target)三种情况下的应用
2013/04/09 Javascript
自定义的一个简单时尚js下拉选择框
2013/11/20 Javascript
js图片预加载示例
2014/04/30 Javascript
js获取字符串最后一位方法汇总
2014/11/13 Javascript
jQuery经过一段时间自动隐藏指定元素的方法
2015/03/17 Javascript
基于javascript实现listbox左右移动
2016/01/29 Javascript
JavaScript中常用的验证reg
2016/10/13 Javascript
javascript 内置对象及常见API详细介绍
2016/11/01 Javascript
详解能在多种前端框架下使用的表格控件
2017/01/11 Javascript
nodejs 最新版安装npm 的使用详解
2018/01/18 NodeJs
关于Vue组件库开发详析
2018/07/01 Javascript
vue 移动端适配方案详解
2018/11/15 Javascript
Vue仿微信app页面跳转动画效果
2019/08/21 Javascript
基于layui的table插件进行复选框联动功能的实现方法
2019/09/19 Javascript
Python使用reportlab将目录下所有的文本文件打印成pdf的方法
2015/05/20 Python
基于Python os模块常用命令介绍
2017/11/03 Python
python实现汉诺塔算法
2021/03/01 Python
python3安装speech语音模块的方法
2018/12/24 Python
python3去掉string中的标点符号方法
2019/01/22 Python
python使用参数对嵌套字典进行取值的方法
2019/04/26 Python
python中dict使用方法详解
2019/07/17 Python
Python定时任务APScheduler安装及使用解析
2020/08/07 Python
什么是唯一索引
2015/07/05 面试题
Linux文件系统类型
2012/09/16 面试题
党员个人剖析材料(四风问题)
2014/10/07 职场文书
个人贷款收入证明
2014/10/26 职场文书
2015年党小组工作总结
2015/05/26 职场文书
七一活动主持词
2015/06/29 职场文书
Python 绘制多因子柱状图
2022/05/11 Python