在vue中實(shí)現(xiàn)禁止屏幕滾動(dòng),禁止屏幕滑動(dòng)

更新時(shí)間：2020年07月22日 10:24:52 作者：六月迎風(fēng)

這篇文章主要介紹了在vue中實(shí)現(xiàn)禁止屏幕滾動(dòng),禁止屏幕滑動(dòng)，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧

今天寫了一個(gè)Vue彈層組件，用來全屏查看圖片的，大概是下面這么一個(gè)效果：

其中背景是透明色的，但是彈出這個(gè)組件時(shí)手指滑動(dòng)、鼠標(biāo)滾輪滑動(dòng)，底部頁面是會(huì)動(dòng)。

作為自己開發(fā)的一個(gè)常用的組件，這種bug當(dāng)然是要解決的。

于是學(xué)藝不精的我在網(wǎng)上找了蠻久的，看了不少博客，看了不少觀點(diǎn)和方法。終于找到了一個(gè)最簡單、最實(shí)在的方法，

代碼如下：

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

首先，這個(gè)div就是整個(gè)遮罩組件的根組件，核心就是div上的事件綁定。

@touchmove 是觸摸移動(dòng)事件

@mousewheel 是鼠標(biāo)滾輪事件

而加了prevent事件后綴，相信大家都知道是阻止默認(rèn)事件。

當(dāng)組件在屏幕最上方顯示時(shí)，觸摸移動(dòng)事件和鼠標(biāo)滾輪都被阻止了，所以頁面不會(huì)再滾動(dòng)。

在網(wǎng)上也看到了很多給body添加事件的解決方法：

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

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

這里就不說了，網(wǎng)上有很多，我也沒用上，所以沒有驗(yàn)證，如果是傳統(tǒng)頁面的，可以使用一下這種方法。

好了，菜鳥要繼續(xù)去學(xué)習(xí)了。。。

補(bǔ)充知識：VUE2.0 實(shí)現(xiàn)移動(dòng)端在固定區(qū)域內(nèi)的滾動(dòng)效果

1.開發(fā)工具：微信web開發(fā)者工具；

2.項(xiàng)目：嵌在APP中的一個(gè)活動(dòng)，活動(dòng)是H5頁面，使用VUE2.0框架。

3.需求，直接上截圖：

item 上拉滾動(dòng)到底部，遮罩層部分消失；item下拉，遮罩層部分顯示。

4.代碼：

HTML：

遮罩層部分與滾動(dòng)區(qū)域部分是平級

<template>
 <div id="selectGoods">
 <!--item列表區(qū)域-->
 <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>我是右側(cè)文本第二行</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（重點(diǎn)）:

.goods-area{
 height:8.58rem;
 overflow-x: hidden;  /* 解決左右可以滑動(dòng)的問題 */
 overflow-y: auto;  /* 解決左右可以滑動(dòng)的問題 */
 overflow-scrolling: touch; /*兼容性 ios5+、android4+ */
}

JS：

this.$refs.是VUE2.0新增的一個(gè)對象，不需要使用JS原生的獲取DOM節(jié)點(diǎn)的方法，直接在元素上綁定ref,如上，<div ref = "box">，然后再JS中直接調(diào)用 this.$refs.box 就可以直接獲取。另外，感興趣的小伙伴可以看一下，console.log(this.$refs.item)的結(jié)果。

回歸本文主題，vue2.0 中的 mounted 方法，是頁面加載后調(diào)用方法的地方。這還牽扯到另外一個(gè)問題就是VUE的鉤子函數(shù)（后續(xù)工作中有了更深入的體會(huì)結(jié)合自己的實(shí)際項(xiàng)目再寫一篇）。

頁面加載后，監(jiān)聽滾動(dòng)區(qū)域的 scroll 事件，調(diào)用 onScroll 方法，根據(jù)滾動(dòng)的尺寸判斷是否已經(jīng)滾動(dòng)到底部，控制遮罩層的顯示和隱藏。

mounted () {
 this.$refs.box.addEventListener('scroll', this.onScroll);
},
onScroll () { //onScroll方法放在methods:{}中
 let nScrollHeight = this.$refs.box.scrollHeight; // 滾動(dòng)距離總長 內(nèi)部div的高度
 let nScrollTop = this.$refs.box.scrollTop; // 滾動(dòng)條（點(diǎn)）當(dāng)前的位置在內(nèi)部div的高度 里占多少
 let itemHeight = nScrollHeight / (this.items.length); // 可以理解為每一個(gè)item的高度
 let scrollLength = itemHeight * (this.items.length - 4); // 默認(rèn)顯示4個(gè)item
 this.bottomMaskShow = true;
 if (nScrollTop > (scrollLength -49)) { // 49 這個(gè)差值比較靈活，是根據(jù)項(xiàng)目中打印出來的item高度和scrollTop實(shí)際滾動(dòng)（出去）的值對比得出的
 this.bottomMaskShow = false;
 } else
 if(nScrollTop <= (scrollLength -49)){ 
 this.bottomMaskShow = true;
 }
}

其實(shí)這個(gè)功能沒有什么難點(diǎn)，但是自己在這個(gè)問題上糾纏了好長時(shí)間，在移動(dòng)端的效果總是不理想，原因在于，在一開始自己就進(jìn)入了一個(gè)誤區(qū)，認(rèn)為在微信的開發(fā)工具上打印出來的 scrollTop 跟手機(jī)上打印出來的是一樣的，結(jié)果是，完全不一樣，手機(jī)根據(jù)尺寸的大小scrollTop的值也是不一樣的。

寫在最后：

1.對于移動(dòng)端的適配問題，靈活，以不變應(yīng)萬變；

2.遇到問題，想想那些點(diǎn)都是“你以為的”，可能就是這些“你以為的”出了問題；

以上這篇在vue中實(shí)現(xiàn)禁止屏幕滾動(dòng),禁止屏幕滑動(dòng)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: