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

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

<div class="dialog" @touchmove.prevent ></div>

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

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

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

移動端解決方案

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

<div class="maskBox" @touchmove.prevent></div>

PC端解決方案

彈層顯示時呼叫 stopMove()停止頁面滾動 ，彈層消失時呼叫 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='';//出現滾動條
  document.removeEventListener("touchmove",{ passive:true });
 }

以上這篇vue 遮罩層阻止預設滾動事件操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。