如何解決移動端滾動穿透問題

大家都知道，移動端當有fixed遮罩背景和彈出層時，在螢幕上滑動能夠滑動背景下面的內容，這就是著名的滾動穿透問題。

下面就介紹一下如何解決此問題:

css的overflow: hidden:

[CSS] 純文字檢視 複製程式碼
.modal-open {
  &, body {
    overflow: hidden;
    height: 100%;
  }
}

頁面彈出層上將 .modal-open 新增到 html 上，禁用 html 和 body 的滾動條

但是這個方案有兩個缺點：

（1）.由於 html 和 body的滾動條都被禁用，彈出層後頁面的滾動位置會丟失，需要用 js 來還原。

（2）.頁面的背景還是能夠有滾的動的效果。

js的touchmove + preventDefault:

[JavaScript] 純文字檢視 複製程式碼
modal.addEventListener('touchmove', function(e) {
  e.preventDefault();
}, false);

這樣用 js 阻止滾動後看起來效果不錯了，但是也有一個缺點：

彈出層裡不能有其它需要滾動的內容（如大段文字需要固定高度，顯示滾動條也會被阻止）。

所以上面兩個方案都有缺點，今天用英文關鍵字 google 了一下，才發現原來還有更好的方案。

解決方案 position: fixed:

[CSS] 純文字檢視 複製程式碼
body.modal-open {
  position: fixed;
  width: 100%;
}

如果只是上面的 css，滾動條的位置同樣會丟失

所以如果需要保持滾動條的位置需要用 js 儲存滾動條位置關閉的時候還原滾動位置

這樣上面3個缺點都解決了，至此滾動穿透就完美解決了.