在寫(xiě)移動(dòng)端頁(yè)面的時(shí)候,彈出遮罩層后，我們?nèi)匀豢梢詽L動(dòng)頁(yè)面。

vue中提供 @touchmove.prevent 方法可以完美解決這個(gè)問(wèn)題

<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()開(kāi)啟頁(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) }, //開(kāi)啟頁(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)。