vue 遮罩層阻止默認(rèn)滾動(dòng)事件操作
在寫移動(dòng)端頁(yè)面的時(shí)候,彈出遮罩層后,我們?nèi)匀豢梢詽L動(dòng)頁(yè)面。
vue中提供 @touchmove.prevent 方法可以完美解決這個(gè)問題
<div @touchmove.prevent ></div>
如果不是使用Vue的話,可以給body添加overflow:hidden屬性解決
補(bǔ)充知識(shí):vue項(xiàng)目中禁止頁(yè)面滾動(dòng) / 滾動(dòng)事件穿透 (彈出蒙版時(shí),彈出層下面還可以滾動(dòng))
vue項(xiàng)目中彈出層時(shí),蒙版下還可以滾動(dòng)頁(yè)面。
移動(dòng)端解決方案
在蒙層所在div上加 @touchmove.prevent
<div @touchmove.prevent></div>
PC端解決方案
彈層顯示時(shí)調(diào)用 stopMove()停止頁(yè)面滾動(dòng) ,彈層消失時(shí)調(diào)用 Move()開啟頁(yè)面滾動(dòng)
//停止頁(yè)面滾動(dòng) stopMove(){ let m = function(e){e.preventDefault();}; document.body.style.overflow=’hidden’; document.addEventListener('touchmove',m,{ passive:false });//禁止頁(yè)面滑動(dòng) }, //開啟頁(yè)面滾動(dòng) Move(){ let m =function(e){e.preventDefault();}; document.body.style.overflow=’’;//出現(xiàn)滾動(dòng)條 document.removeEventListener('touchmove',m,{ passive:true }); }
以上這篇vue 遮罩層阻止默認(rèn)滾動(dòng)事件操作就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:
1. 告別AJAX實(shí)現(xiàn)無(wú)刷新提交表單2. ASP中常用的22個(gè)FSO文件操作函數(shù)整理3. XML入門的常見問題(四)4. ASP的Global.asa文件技巧用法5. CSS3實(shí)例分享之多重背景的實(shí)現(xiàn)(Multiple backgrounds)6. ASP中if語(yǔ)句、select 、while循環(huán)的使用方法7. 使用css實(shí)現(xiàn)全兼容tooltip提示框8. Vue+elementUI下拉框自定義顏色選擇器方式9. SharePoint Server 2019新特性介紹10. PHP函數(shù)原理理解詳談
