vue 遮罩層阻止默認滾動事件操作
更新時間：2020年07月28日 09:44:01 作者：Pany丨
這篇文章主要介紹了vue 遮罩層阻止默認滾動事件操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
在寫移動端頁面的時候,彈出遮罩層后，我們?nèi)匀豢梢詽L動頁面。
vue中提供 @touchmove.prevent 方法可以完美解決這個問題
<div class="dialog" @touchmove.prevent ></div>
如果不是使用Vue的話，可以給body添加overflow:hidden屬性解決
補充知識：vue項目中禁止頁面滾動 / 滾動事件穿透 (彈出蒙版時，彈出層下面還可以滾動)
vue項目中彈出層時，蒙版下還可以滾動頁面。
移動端解決方案
在蒙層所在div上加 @touchmove.prevent
<div class="maskBox" @touchmove.prevent></div>
PC端解決方案
彈層顯示時調(diào)用 stopMove()停止頁面滾動 ，彈層消失時調(diào)用 Move()開啟頁面滾動
//停止頁面滾動
stopMove(){
let m = function(e){e.preventDefault();};
document.body.style.overflow='hidden';
document.addEventListener("touchmove",m,{ passive:false });//禁止頁面滑動
},
//開啟頁面滾動
Move(){
let m =function(e){e.preventDefault();};
document.body.style.overflow='';//出現(xiàn)滾動條
document.removeEventListener("touchmove",m,{ passive:true });
}
以上這篇vue 遮罩層阻止默認滾動事件操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue-router懶加載速度緩慢問題及解決方法，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-11-11
Vue中實現(xiàn)深度監(jiān)聽的方法小結(jié)
在Vue中,深度監(jiān)聽是一種非常常見且重要的功能,它可以讓我們監(jiān)聽對象內(nèi)部的所有屬性,并對這些屬性的變化做出相應(yīng)的處理,在本篇博客中,我將為大家介紹Vue中如何實現(xiàn)深度監(jiān)聽的方法,需要的朋友可以參考下2024-09-09
本文的初衷是想讓更多哎學習的人知道并了解vue模版編譯，所以文中主要以階段流程為主，不會涉及過多的底層代碼邏輯,需要的朋友可以參考一下2021-09-09
這篇文章主要介紹了vue的狀態(tài)更新方式(異步更新解決)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue 自定義標簽的src屬性不能使用相對路徑的解決，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09
這篇文章主要介紹了Vue中子組件向父組件傳值$emit、.sync的方法，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-09-09
vue基礎(chǔ)ESLint?Prettier配置教程詳解
這篇文章主要介紹了vue基礎(chǔ)ESLint?Prettier配置教程詳解，本文使用VsCode?+?Vue?+?ESLint?+?Prettier?實現(xiàn)代碼格式規(guī)范?+?保存自動修復代碼js+vue2022-07-07
下面小編就為大家分享一篇vue element-ui table表格滾動加載方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
VUE使用router.push實現(xiàn)頁面跳轉(zhuǎn)和傳參方式
這篇文章主要介紹了VUE使用router.push實現(xiàn)頁面跳轉(zhuǎn)和傳參方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
vue中echarts圖表大小適應(yīng)窗口大小且不需要刷新案例
這篇文章主要介紹了vue中echarts圖表大小適應(yīng)窗口大小且不需要刷新案例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07