移動端滾動穿透問題

定義：移動端彈出fixed彈窗的話，在彈窗上滑動會致使下層的頁面跟着滾動，這個叫 「滾動穿透」

解決方案1

在彈出層的touchstart事件中調用preventDefault

這種方法不可取，至少有3個缺點：

1. 若是彈出層自己是有滾動（條）的話，將會致使彈出層沒法滾動，此時用這種方法無異於飲鴆止渴。
2. 一個很常見的場景，點擊彈出層，彈出層消失掉，此時也沒法觸發彈出層的點擊回調事件。
3. 彈出層內的任何事件都執行不了了。

解決方案2

此解決方案是解決方案1的升級版。

在彈出層的touchmove（注意區別）事件中調用preventDefault

這種解決辦法沒有了第一種解決辦法的 2, 3 缺點。適用於彈出層自己有沒有滾動（條）。

解決方案3

設置body{overflow:hidden;}

缺點：經測試，在PC上支持良好，可是在IOS端，跟沒有設置是同樣的，徹底不起任何做用！。

這種解決方案適用於PC端。

解決方案4

設置 html,body{overflow:hidden;}

在PC和移動端都能禁止掉下層的滾動。

缺點：

1. 滾動位置丟失！頁面會回到頂部！
2. 頁面的背景仍是可以有滾的動的效果（這個我沒遇到）。

可經過js來fix這個缺點，在彈出層出現時，記錄頁面的scrollTop，當彈出層消失時，把先前記錄的scrollTop再次賦予頁面。

終極完美解決方案

此解決方案可以避免上述全部缺點。堪稱完美。

css

body.dialog-open {
  position: fixed;
  width: 100%;
}
複製代碼

javascript

(function(){

   var scrollTop = 0;

   // 顯示彈出層
   open.onclick = function(){
      
      // 在彈出層顯示以前，記錄當前的滾動位置
      scrollTop = getScrollTop();
        
      // 使body脫離文檔流
      document.body.classList.add('dialog-open'); 
      
      // 把脫離文檔流的body拉上去！不然頁面會回到頂部！
      document.body.style.top = -scrollTop + 'px';
    
      mask.style.display = 'block';
   }  

   // 隱藏彈出層
   close.onclick = function(){

     mask.style.display = 'none';
     
     // body又回到了文檔流中（我胡漢三又回來啦！）
     document.body.classList.remove('dialog-open');
 
     // 滾回到老地方
     to(scrollTop);
   }

   function to(scrollTop){
     document.body.scrollTop = document.documentElement.scrollTop = scrollTop;
   }
   function getScrollTop(){
     return document.body.scrollTop || document.documentElement.scrollTop;
   }

 }()); 

 

複製代碼

解決滾動穿透的2個工具方法：

function fixedBody(){
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    document.body.style.cssText += 'position:fixed;top:-'+scrollTop+'px;';
}

function looseBody() {
    var body = document.body;
    body.style.position = '';
    var top = body.style.top;
    document.body.scrollTop = document.documentElement.scrollTop = -parseInt(top);
    body.style.top = '';
}
複製代碼

參考文章[http://www.cnblogs.com/sohighthesky/p/mobile-modal-scroll.html]