vue遮罩層如何阻止?jié)L動
更新時間：2022年07月27日 10:51:46 作者：sslcsq
這篇文章主要介紹了vue遮罩層如何阻止?jié)L動，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue遮罩層阻止?jié)L動
給vue用fixed定位加一個遮罩層，滾動鼠標(biāo)滾輪發(fā)現(xiàn)下面一層的頁面隨之滾動，那么如何阻止下層頁面滾動？
我這里給遮罩層加一個取消鼠標(biāo)滾輪默認(rèn)行為的事件
<div class="popup" @mousewheel="mousewheel"> ? ?<div class="cen">彈框內(nèi)容</div> </div>
mousewheel(e){
? e.preventDefault();
}或者使用vue中提供 @touchmove.prevent 方法可以完美解決這個問題
<div class="popup" @touchmove.prevent v-if="show"> </div>
這會造成一個問題雖然遮罩層滾動問題解決了，但是彈框中的內(nèi)容要是滾動會間接性的影響到遮罩層的滾動，那么如何解決？
網(wǎng)上查了很多資料，試了一下沒有效果，我這里的解決方案是點擊詳情的時候彈出遮罩層，彈出的時候給body設(shè)置overflow:hidden當(dāng)點擊關(guān)閉遮罩層時，設(shè)置overflow:null
代碼如下：
<!-- 手寫彈框 --> ?? ?// 遮罩層 ? ? <div class="popup" @touchmove.prevent v-if="show"></div> ?? ? ?? ?// 彈框內(nèi)容 (已設(shè)置overflow:scroll超出滾動) ? ? <div class="cen" v-if="show"> ? ? ? ? <ul> ? ? ? ? ? ? <li v-for="(e,i) in dts" :key="i"> ? ? ? ? ? ? ? ? <img :src="e" alt=""> ? ? ? ? ? ? </li> ? ? ? ? </ul> ? ? </div> ? ? // 關(guān)閉按鈕 ? ? <div class="gb" @click="gb()" v-if="show"> ? ? ? ? <svg t="1604306237286" class="icon ic" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2388" width="48" height="48"><path d="M660.518 682.87c-5.903 0-11.804-2.2-16.306-6.702L342.366 374.372c-9.003-9.003-9.003-23.608 0-32.61s23.608-9.002 32.61 0l301.847 301.796c9.002 9.003 9.002 23.607 0 32.61-4.501 4.5-10.404 6.703-16.305 6.703z" p-id="2389" fill="#ffffff"></path><path d="M358.67 682.87c-5.901 0-11.803-2.2-16.304-6.702-9.003-9.003-9.003-23.607 0-32.61l301.846-301.796c9.003-9.002 23.607-9.002 32.61 0 9.002 9.002 9.002 23.607 0 32.61L374.977 676.168c-4.503 4.5-10.404 6.703-16.307 6.703z" p-id="2390" fill="#ffffff"></path><path d="M509.62 956.157c-246.579 0-447.244-200.614-447.244-447.242 0-246.58 200.664-447.218 447.243-447.218 246.58 0 447.243 200.638 447.243 447.218 0 246.628-200.664 447.242-447.243 447.242z m0-848.346c-221.172 0-401.13 179.933-401.13 401.105 0 221.169 179.958 401.128 401.13 401.128 221.17 0 401.127-179.959 401.127-401.128 0-221.172-179.957-401.105-401.128-401.105z" p-id="2391" fill="#ffffff"></path></svg> ? ? </div>
// 這是列表數(shù)據(jù)點擊時
details(e)
{
? ?this.dts=e
? ?this.show=!this.show
? ?var body = document.getElementsByTagName('body')[0]
? ?console.log(body)
? ?body.style.overflow='hidden'
},?
// 這是點擊關(guān)閉按鈕時
gb()
{
? ?this.show=!this.show
? ?var body = document.getElementsByTagName('body')[0]
? ?console.log(body)
? ?body.style.overflow=null
}vue解決遮罩層滾動方法
vue遮罩層阻止默認(rèn)滾動事件
在寫移動端頁面的時候,彈出遮罩層后，我們?nèi)匀豢梢詽L動頁面。
vue中提供 @touchmove.prevent 方法可以完美解決這個問題
<div class="dialog" @touchmove.prevent ></div>
或者給不需要滾動的部分加上overflow:hidden屬性解決
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue頁面堆棧管理器2021-10-10
幾個你不知道的技巧助你寫出更優(yōu)雅的vue.js代碼
本文參考自油管上某個國外大神的公開演講視頻，學(xué)習(xí)了一下覺得很不錯，所以在項目中也使用了這些不錯的技巧。趁周末有空，寫個博客記錄一下2018-06-06
Vue3帶來了許多性能優(yōu)化和效率提升的特性，本文將重點討論Vue3在靜態(tài)提升、預(yù)字符串化、緩存事件處理函數(shù)、Block?Tree和PatchFlag方面的改進，我們將通過對比Vue2和Vue3的編譯結(jié)果來說明這些方面的效率提升2023-12-12
本文主要介紹了npm install sentry-cli失敗的問題解決,文章首先描述了問題現(xiàn)象,然后分析了問題的原因,具有一定的參考價值,感興趣的可以了解一下2023-08-08
本文通過實例代碼給大家介紹了vue生命周期和react生命周期對比 ,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-09-09
Vue中使用?Aplayer?和?Metingjs?添加音樂插件的方式
這篇文章主要介紹了Vue中使用?Aplayer?和?Metingjs?添加音樂插件,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-08-08
這篇文章主要介紹了vue-router 組件的高級應(yīng)用,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-04
VUE+elementui組件在table-cell單元格中繪制微型echarts圖
這篇文章主要介紹了VUE+elementui組件在table-cell單元格中繪制微型echarts圖，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
Vue報錯Component?name"Home"should?always?be?mult
這篇文章主要介紹了Vue報錯Component?name"Home"should?always?be?multi問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了Vue-router路由該如何使用，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-03-03