vue遮罩層如何阻止?jié)L動(dòng)
vue遮罩層阻止?jié)L動(dòng)
給vue用fixed定位加一個(gè)遮罩層,滾動(dòng)鼠標(biāo)滾輪發(fā)現(xiàn)下面一層的頁(yè)面隨之滾動(dòng),那么如何阻止下層頁(yè)面滾動(dòng)?
我這里給遮罩層加一個(gè)取消鼠標(biāo)滾輪默認(rèn)行為的事件
<div class="popup" @mousewheel="mousewheel"> ? ?<div class="cen">彈框內(nèi)容</div> </div>
mousewheel(e){ ? e.preventDefault(); }
或者使用vue中提供 @touchmove.prevent 方法可以完美解決這個(gè)問(wèn)題
<div class="popup" @touchmove.prevent v-if="show"> </div>
這會(huì)造成一個(gè)問(wèn)題雖然遮罩層滾動(dòng)問(wèn)題解決了,但是彈框中的內(nèi)容要是滾動(dòng)會(huì)間接性的影響到遮罩層的滾動(dòng),那么如何解決?
網(wǎng)上查了很多資料,試了一下沒(méi)有效果,我這里的解決方案是點(diǎn)擊詳情的時(shí)候彈出遮罩層,彈出的時(shí)候給body設(shè)置overflow:hidden當(dāng)點(diǎn)擊關(guān)閉遮罩層時(shí),設(shè)置overflow:null
代碼如下:
<!-- 手寫彈框 --> ?? ?// 遮罩層 ? ? <div class="popup" @touchmove.prevent v-if="show"></div> ?? ? ?? ?// 彈框內(nèi)容 (已設(shè)置overflow:scroll超出滾動(dòng)) ? ? <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ù)點(diǎn)擊時(shí) details(e) { ? ?this.dts=e ? ?this.show=!this.show ? ?var body = document.getElementsByTagName('body')[0] ? ?console.log(body) ? ?body.style.overflow='hidden' },? // 這是點(diǎn)擊關(guān)閉按鈕時(shí) gb() { ? ?this.show=!this.show ? ?var body = document.getElementsByTagName('body')[0] ? ?console.log(body) ? ?body.style.overflow=null }
vue解決遮罩層滾動(dòng)方法
vue遮罩層阻止默認(rèn)滾動(dòng)事件
在寫移動(dòng)端頁(yè)面的時(shí)候,彈出遮罩層后,我們?nèi)匀豢梢詽L動(dòng)頁(yè)面。
vue中提供 @touchmove.prevent 方法可以完美解決這個(gè)問(wèn)題
<div class="dialog" @touchmove.prevent ></div>
或者給不需要滾動(dòng)的部分加上overflow:hidden屬性解決
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
幾個(gè)你不知道的技巧助你寫出更優(yōu)雅的vue.js代碼
本文參考自油管上某個(gè)國(guó)外大神的公開(kāi)演講視頻,學(xué)習(xí)了一下覺(jué)得很不錯(cuò),所以在項(xiàng)目中也使用了這些不錯(cuò)的技巧。趁周末有空,寫個(gè)博客記錄一下2018-06-06npm install sentry-cli失敗的問(wèn)題解決
本文主要介紹了npm install sentry-cli失敗的問(wèn)題解決,文章首先描述了問(wèn)題現(xiàn)象,然后分析了問(wèn)題的原因,具有一定的參考價(jià)值,感興趣的可以了解一下2023-08-08Vue中使用?Aplayer?和?Metingjs?添加音樂(lè)插件的方式
這篇文章主要介紹了Vue中使用?Aplayer?和?Metingjs?添加音樂(lè)插件,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-08-08vue router 組件的高級(jí)應(yīng)用實(shí)例代碼
這篇文章主要介紹了vue-router 組件的高級(jí)應(yīng)用,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04VUE+elementui組件在table-cell單元格中繪制微型echarts圖
這篇文章主要介紹了VUE+elementui組件在table-cell單元格中繪制微型echarts圖,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04Vue報(bào)錯(cuò)Component?name"Home"should?always?be?mult
這篇文章主要介紹了Vue報(bào)錯(cuò)Component?name"Home"should?always?be?multi問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09