問題描述
最近在做移動項目時遇到一個頁面滾動穿透問題，具體場景是這樣的，在一個可滾動的列表頁中打開彈窗，底部的頁面理論上是不可滾動的，但是當滑動彈窗時，底部頁面會跟隨滾動，這就是所謂的頁面滾動穿透的問題。這個是比較常見的問題，基本都會遇到，Google一下出解決方案也是挺多的。以下根據不同的適用場景總結一些解決方案：
方案一：overflow:hidden
在列表容器的父元素上設置樣式overflow:hidden來禁用滾動
.alpha {
height: 100%;
overflow: hidden;
}
.alpha body {
height: 100%;
overflow: hidden;
}
當彈出蒙層的時候，可以添加底部頁面HTML標簽的class，取消蒙層時則刪除class
$('html').addClass('alpha');
$('html').removeClass('alpha');
缺點：
當彈出蒙層時，禁用了html和body的滾動條，滾動列表的滾動位置會丟失，會重置到沒有滾動的狀態，需要js進行還原。
手機掃碼查看效果：
查看DEMO
1、未滾動時彈出蒙層，底部列表會被禁用滾動
2、滾動后再彈出蒙層，滾動位置會丟失，重置到無滾動的位置
方案二：阻止touchmove默認事件
通過阻止彈窗的touchmove默認事件禁用滾動實現
代碼實現：
var modal = document.getElementById('modal'); // 彈窗dom對象
modal.addEventListener('touchmove', function(e) {
e.preventDefault();
}, false);
缺點
彈窗中里不能有其它需要滾動的內容，如大段文字需要固定高度，顯示滾動條也會被阻止。
手機掃碼查看效果：
查看DEMO
方案三：position: fixed
設置列表容器元素為positon:fixed
代碼實現:
.alpha.body{
position:fixed;
width:100%;
}
缺點：
這種方法同樣有以上兩種方法的缺點，滾動列表的滾動位置會丟失，會重置到沒有滾動的狀態，通過js獲取滾動條位置，調整位置即可。
打開彈窗時則在body元素上添加class
手機掃碼查看效果：
查看DEMO
