在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 相关文章推荐
JavaScript让IE浏览器event对象符合W3C DOM标准
Nov 24 Javascript
jquery offset函数应用实例
Nov 14 Javascript
JavaScript验证图片类型(扩展名)的函数分享
May 05 Javascript
Angularjs制作简单的路由功能demo
Apr 14 Javascript
js实现密码强度检测【附示例】
Mar 30 Javascript
jquery对所有input type=text的控件赋值实现方法
Dec 02 Javascript
Angular.Js的自动化测试详解
Dec 09 Javascript
详解用函数式编程对JavaScript进行断舍离
Sep 18 Javascript
JS数组求和的常用方法实例小结
Jan 07 Javascript
浅谈JavaScript_DOM学习篇_图片切换小案例
Mar 19 Javascript
vue自定义switch开关组件,实现样式可自行更改
Nov 01 Javascript
手把手带你搭建一个node cli的方法示例
Aug 07 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
解析关于wamp启动是80端口被占用的问题
2013/06/21 PHP
php+js实现异步图片上传实例分享
2014/06/02 PHP
php生成不重复随机数、数组的4种方法分享
2015/03/30 PHP
PHP实现统计在线人数功能示例
2016/10/15 PHP
PHP 年月日的三级联动实例代码
2017/05/24 PHP
Vagrant(WSL)+PHPStorm+Xdebu 断点调试环境搭建
2019/12/13 PHP
JavaScript随机排序(随即出牌)
2010/09/17 Javascript
javascript定时保存表单数据的代码
2011/03/17 Javascript
利用javascript实现全部删或清空所选的操作
2014/05/27 Javascript
纯js实现重发验证码按钮倒数功能
2015/04/21 Javascript
JS中传递参数的几种不同方法比较
2017/01/20 Javascript
详解Vue.js中.native修饰符
2018/04/24 Javascript
ES6小技巧之代替lodash
2019/06/07 Javascript
Vue数字输入框组件示例代码详解
2020/01/15 Javascript
[01:11]回顾历届DOTA2国际邀请赛中国区预选赛
2017/06/26 DOTA
Python脚本实现格式化css文件
2015/04/08 Python
初步解析Python下的多进程编程
2015/04/28 Python
python搜索指定目录的方法
2015/04/29 Python
Python实现多线程抓取网页功能实例详解
2017/06/08 Python
Python爬虫常用小技巧之设置代理IP
2018/09/13 Python
ipython和python区别详解
2019/06/26 Python
Python如何读取文件中图片格式
2020/01/13 Python
Django-celery-beat动态添加周期性任务实现过程解析
2020/11/26 Python
使用CSS3实现字体颜色渐变的实现
2020/08/10 HTML / CSS
美国现代家具和家居商店:Apt2B
2016/08/29 全球购物
荷兰网上买鞋:MooieSchoenen.nl
2017/09/12 全球购物
Hotels.com印度:酒店预订
2019/05/11 全球购物
.net工程师笔试题
2012/06/09 面试题
关于打架的检讨书
2014/01/17 职场文书
表彰先进的通报
2014/01/31 职场文书
走群众路线剖析材料
2014/10/09 职场文书
初中中等生评语
2014/12/29 职场文书
司机个人年终总结
2015/03/03 职场文书
2015年监理工作总结范文
2015/04/07 职场文书
MybatisPlus代码生成器的使用方法详解
2021/06/13 Java/Android
分析mysql中一条SQL查询语句是如何执行的
2021/06/21 MySQL