vue遮罩層如何阻止?jié)L動(dòng)
vue遮罩層阻止?jié)L動(dòng)
給vue用fixed定位加一個(gè)遮罩層，滾動(dòng)鼠標(biāo)滾輪發(fā)現(xiàn)下面一層的頁面隨之滾動(dòng)，那么如何阻止下層頁面滾動(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è)問題
<div class="popup" @touchmove.prevent v-if="show"> </div>
這會(huì)造成一個(gè)問題雖然遮罩層滾動(dòng)問題解決了，但是彈框中的內(nèi)容要是滾動(dòng)會(huì)間接性的影響到遮罩層的滾動(dòng)，那么如何解決？
網(wǎng)上查了很多資料，試了一下沒有效果，我這里的解決方案是點(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)端頁面的時(shí)候,彈出遮罩層后，我們?nèi)匀豢梢詽L動(dòng)頁面。
vue中提供 @touchmove.prevent 方法可以完美解決這個(gè)問題
<div class="dialog" @touchmove.prevent ></div>
或者給不需要滾動(dòng)的部分加上overflow:hidden屬性解決
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue + gojs 實(shí)現(xiàn)拖拽流程圖效果
最近一段時(shí)間在研究go.js,它是一款前端開發(fā)畫流程圖的一個(gè)插件，也是一個(gè)難點(diǎn)，要說為什么是難點(diǎn)，首先，它是依賴畫布canvas知識(shí)開發(fā)，這篇文章主要介紹了vue + gojs 實(shí)現(xiàn)拖拽流程圖,需要的朋友可以參考下2023-03-03
vue+js點(diǎn)擊箭頭實(shí)現(xiàn)圖片切換
這篇文章主要為大家詳細(xì)介紹了vue+js點(diǎn)擊箭頭實(shí)現(xiàn)圖片切換，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
本篇文章主要介紹了詳解Vue 事件驅(qū)動(dòng)和依賴追蹤 ，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-04-04
Vue3整合WangEditor富文本編輯器的實(shí)踐指南
這篇文章主要為大家詳細(xì)介紹了如何在?Vue?3?項(xiàng)目中集成?WangEditor?富文本編輯器,實(shí)現(xiàn)圖文混排、自定義擴(kuò)展等高階功能,感興趣的小伙伴可以了解下2025-03-03
VUE項(xiàng)目實(shí)現(xiàn)全屏顯示功能之screenfull用法
這篇文章主要介紹了VUE項(xiàng)目實(shí)現(xiàn)全屏顯示功能之screenfull用法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
Vue3中的ref為何要用.value進(jìn)行值的調(diào)用呢
這篇文章主要介紹了Vue3中的ref為何要用.value進(jìn)行值的調(diào)用，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue項(xiàng)目中如何封裝axios（統(tǒng)一管理http請(qǐng)求）
這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目中如何封裝axios（統(tǒng)一管理http請(qǐng)求）的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
vue實(shí)現(xiàn)echarts餅圖/柱狀圖點(diǎn)擊事件實(shí)例
echarts原生提供了相應(yīng)的API,只需要在配置好echarts之后綁定相應(yīng)的事件即可,下面這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)echarts餅圖/柱狀圖點(diǎn)擊事件的相關(guān)資料,需要的朋友可以參考下2023-06-06
vue使用$emit實(shí)現(xiàn)同步調(diào)用
這篇文章主要介紹了vue使用$emit實(shí)現(xiàn)同步調(diào)用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
element根據(jù)輸入動(dòng)態(tài)生成表格的示例代碼
在現(xiàn)代電商系統(tǒng)開發(fā)中,后臺(tái)管理界面經(jīng)常需要根據(jù)商品規(guī)格和規(guī)格值動(dòng)態(tài)生成SKU表格,本文通過element-ui框架,展示了如何在Vue.js的環(huán)境下,利用子組件和動(dòng)態(tài)綁定的方式,實(shí)現(xiàn)SKU表格的增刪改查功能2024-11-11