vue 遮罩層阻止默認(rèn)滾動事件操作
在寫移動端頁面的時(shí)候,彈出遮罩層后,我們?nèi)匀豢梢詽L動頁面。
vue中提供 @touchmove.prevent 方法可以完美解決這個(gè)問題
<div @touchmove.prevent ></div>
如果不是使用Vue的話,可以給body添加overflow:hidden屬性解決
補(bǔ)充知識:vue項(xiàng)目中禁止頁面滾動 / 滾動事件穿透 (彈出蒙版時(shí),彈出層下面還可以滾動)
vue項(xiàng)目中彈出層時(shí),蒙版下還可以滾動頁面。
移動端解決方案
在蒙層所在div上加 @touchmove.prevent
<div @touchmove.prevent></div>
PC端解決方案
彈層顯示時(shí)調(diào)用 stopMove()停止頁面滾動 ,彈層消失時(shí)調(diào)用 Move()開啟頁面滾動
//停止頁面滾動 stopMove(){ let m = function(e){e.preventDefault();}; document.body.style.overflow=’hidden’; document.addEventListener('touchmove',m,{ passive:false });//禁止頁面滑動 }, //開啟頁面滾動 Move(){ let m =function(e){e.preventDefault();}; document.body.style.overflow=’’;//出現(xiàn)滾動條 document.removeEventListener('touchmove',m,{ passive:true }); }
以上這篇vue 遮罩層阻止默認(rèn)滾動事件操作就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:
1. 基于android studio的layout的xml文件的創(chuàng)建方式2. 詳解Android studio 動態(tài)fragment的用法3. 圖文詳解vue中proto文件的函數(shù)調(diào)用4. 解決Android studio xml界面無法預(yù)覽問題5. Spring Boot和Thymeleaf整合結(jié)合JPA實(shí)現(xiàn)分頁效果(實(shí)例代碼)6. 什么是python的自省7. Android如何加載Base64編碼格式圖片8. 使用Android studio查看Kotlin的字節(jié)碼教程9. Vuex localStorage的具體使用10. Vue封裝一個(gè)TodoList的案例與瀏覽器本地緩存的應(yīng)用實(shí)現(xiàn)

網(wǎng)公網(wǎng)安備