在寫移動端頁面的時候,彈出遮罩層后，我們?nèi)匀豢梢詽L動頁面。

vue中提供 @touchmove.prevent 方法可以完美解決這個問題

<div @touchmove.prevent ></div>

如果不是使用Vue的話，可以給body添加overflow:hidden屬性解決

補充知識：vue項目中禁止頁面滾動 / 滾動事件穿透 (彈出蒙版時，彈出層下面還可以滾動)

vue項目中彈出層時，蒙版下還可以滾動頁面。

移動端解決方案

在蒙層所在div上加 @touchmove.prevent

<div @touchmove.prevent></div>

PC端解決方案

彈層顯示時調(diào)用 stopMove()停止頁面滾動 ，彈層消失時調(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 遮罩層阻止默認滾動事件操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持好吧啦網(wǎng)。