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