滾動穿透問題

在h5的開發中最常遇到的就是模態框了，各式各樣的模態框層次不窮。最近在開發中遇到了滾動穿透問題。滾動穿透出現的前提是模態框裏的內容高度大於元素自己的高度，也就是滾動的時候會出現。

參考 滾動穿透問題探索

在遇到問題的第一反應是阻止滾動元素的默認行爲和阻止事件冒泡，但並無效果。

接下來想到，在打開彈窗的時候，能夠爲底部內容增長class來阻止底部內容滑動， 可是發現body中的內容會返回頁面頂部，未將滾動的位置進行記錄。也就是底部內容的滾動位置丟失。so,在打開彈窗前須要對頁面滾動位置進行存儲，在關閉彈窗以後對以前的位置進行還原。

//添加一個樣式  
body.modal-open{
 position: fixed;
 width: 100%;
}
複製代碼

而後在點擊彈框的時候調用 ModalHelper .afterOpen();關閉的時候 ModalHelper .beforeClose();

var ModalHelper = (function(bodyCls) {
	var scrollTop;
	return {
		//打開彈窗
		afterOpen: function() {
			scrollTop = document.scrollingElement.scrollTop;
			document.body.classList.add(bodyCls);
			document.body.style.top = -scrollTop + 'px';
		},
		//關閉彈窗
		beforeClose: function() {
			document.body.classList.remove(bodyCls);
			document.body.style.top = 0;
			document.scrollingElement.scrollTop = scrollTop;
		}
	};
})('modal-open');
複製代碼

完美解決！