移動端和PC端彈出遮罩層後,頁面禁止滾動的解決方法及探究

PC端解決方案

pc端的解決思路就是在彈出遮罩層的時候取消已經存在的滾動條，達到沒法滾動的效果。

也就是說給body添加overflow：hidden屬性便可，IE六、7下不會生效，須要給html增長overflow:hidden屬性。

 

要製做這個效果在PC端很是簡單，只須要設置html的高度爲100%佔滿屏幕，而且將html的overflow設置爲hidden，便可保證頁面不可滾動。

可是一樣的問題在移動端狀況就有所區別。僅僅設置html的上列屬性，在移動端仍然沒法禁止頁面超出部分的滾動，咱們須要設置下面的代碼才能在彈框出現的時候禁止頁面滾動：

 

html.style.overflow="hidden";

html.style.height="100%";

body.style.overflow="hidden";

body.style.height="100%";

 

緣由是由於移動端是基於touch事件，要禁止基於touch事件的滾動，咱們必須在對html禁止滾動的基礎之上，再將須要禁止滾動的內容上再增長一個包裹層塊級元素，而後將這個包裹層塊級元素高度設置爲100%並設置overflow:hidden;，那麼在這裏咱們認爲body包裹了整個頁面，正是咱們須要的塊級元素，將他也設置爲禁止滾動，就能夠保證移動端頁面的滑動時間不會觸發頁面滾動。

當用戶關閉了彈框，頁面也就恢復正常，咱們設置以下CSS樣式屬性來還原整個頁面的滾動效果：

 

html.style.overflow="visible";

html.style.height="auto";

body.style.overflow="visible";

body.style.height="auto";

 

這些樣式正是對應CSS屬性的默認樣式。

然而這個方案有一個缺陷，就是ios系統下不兼容，黑幕的效果無法阻止頁面的滾動。下面介紹移動端的另外一種解決方案。

 

 

移動端解決方案

正是由於移動端的滾動基於屏幕的touch事件，所以誕生了方案二（手機淘寶就使用了這種方案）。

首先咱們須要知道兩個前提知識點：一、重疊的兩個頁面元素，z-index值更高的會優先觸發事件監聽，從而能夠在此控制是否讓事件流繼續；二、移動端滾動的touch事件，基於事件流。

有了上面兩個知識點的基礎，咱們就能夠來理解這種方案的設計思路。方案二的原理是：不對原頁面進行任何改動，僅僅只是用一個擁有更高z-index值的，佈局爲absolute或者fixed佈局的黑幕（長寬100%）來擋住整個頁面，而且監聽黑幕的touchmove事件，在touchmove事件內結束事件流，從而阻擋事件流繼續。這樣，可以產生滾動效果的touch事件就傳不到頁面上，也就不會發生滾動。

 

移動端取消滾動條是達不到效果的，這時就須要去除遮罩層和按鈕層的touchmove的默認事件，代碼以下：

 mask.addEventListener("touchmove",function(e){

                    e.stopPropagation();

                    e.preventDefault();

                },false);

 

後來我把e.stopPropagation()註釋了，沒有禁止事件冒泡，在遮罩彈出後touchmove覺得頁面應該會滾動，可是頁面仍是不滾動。而後我在頁面加了

document.getElementsByTagName(‘body’)[0].addEventListener("touchmove", function(){
   alert(‘hello’);
})

;遮罩彈出後，手指touchmove滑動頁面不會滾動,可是會alert(‘hello’);，說明事件仍是冒泡了，只是touchmove沒有傳到頁面上。猜想多是這個緣由，touchmove事件只針對第一次觸發的最上層的容器，而不會冒泡傳遞。

 

原文出處：https://www.cnblogs.com/ranyonsue/p/10763816.html