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