1. 程式人生 > >PC端/移動端 禁止底層頁面滾動

PC端/移動端 禁止底層頁面滾動

在頁面中彈出層後。如果是彈出的頁面滾動到頂部 / 底部後。在拖動 body 也會一起跟著滾動


PC端解決方案:
在蒙版層彈出時,加上這句程式碼:

document.body.parentNode.style.overflow = "hidden";  //禁止橫豎向滾動條

在彈出層頁面關閉時:

document.body.parentNode.style.overflow = "auto";  //恢復橫豎向滾動條

移動端解決方法:
需要先新增一個函式,也可以不新增

function bodyScroll(e){
   e.preventDefault();   //取消事件預設動作
   e.stopPropagation();  //不再派發事件
}

在彈出層顯示時:

document.addEventListener("touchmove",bodyScroll,false);

在彈出層關閉時:

document.removeEventListener("touchmove",bodyScroll,false);

**THE END**