在寫移動端頁面的時(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)。