在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='http://m.propowerdrill.cn/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='http://m.propowerdrill.cn/static/inviteFriends/goodsListMask.png' alt=''> <img src='http://m.propowerdrill.cn/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中實現禁止屏幕滾動,禁止屏幕滑動就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。
網公網安備