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

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

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

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

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

代码如下：

<div 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.需求，直接上截图：

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

4.代码：

HTML：

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

<template> <div id='selectGoods'> <!--item列表区域--> <div ref='box'> <div ref='item' v-for='(item,index) in items' > <img :src='https://www.haobala.com/bcjs/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 v-show='bottomMaskShow'> <img src='https://www.haobala.com/static/inviteFriends/goodsListMask.png' alt=''> <img src='https://www.haobala.com/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中实现禁止屏幕滚动,禁止屏幕滑动就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持好吧啦网。