滚动穿透问题

在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');
复制代码

完美解决！