遮罩層出現時阻止頁面滾動

在寫移動端頁面的時候,彈出遮罩層后，我們仍然可以滾動頁面。

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

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

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

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

移動端解決方案

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

PC端解決方案

彈層顯示時調用 stopMove()停止頁面滾動 ，彈層消失時調用 Move()開啟頁面滾動

//停止頁面滾動

stopMove(){undefined

let m = function(e){e.preventDefault();};

document.body.style.overflow='hidden';

document.addEventListener("touchmove",m,{ passive:false });//禁止頁面滑動

},

//開啟頁面滾動

Move(){undefined

let m =function(e){e.preventDefault();};

document.body.style.overflow='';//出現滾動條

document.removeEventListener("touchmove",m,{ passive:true });

}

遮罩層彈出阻止頁面滾動的分享，轉自以下作者
原文鏈接：https://blog.csdn.net/weixin_35924765/article/details/112021039