Js解决移动端滚动穿透问题

style: 
body{font-family:"微软雅黑";-webkit-text-size-adjust: none;width: 7.5rem;margin: 0 auto;height:100%;-webkit-user-select:none;background:#fff;font-size:0.24rem;}
div.ds,p{height: 80px;width: 100%;overflow: hidden;}
.d{position: fixed;top: 0;left: 0;background: rgba(0,0,0,0.6);width: 100%;height: 100%;}
.d div{width: 80px;height: 80px;background: #fff;position: absolute;margin: auto;top: 0;bottom: 0;left: 0;right: 0;}
span{display: block;width: 40px;height: 10px;line-height: 10px;background: #FAEBD7;color: #000;text-align: center;font-size: 16px;margin: 16px auto;}
i{display: block;position: absolute;top:10px;right: 10px;background: #ccc;width: 10px;height:10px;border-radius: 3px;text-align: center;line-height: 9px;font-size: 12px;}
body.modal-open{position: fixed;}

html:

<div class="ds" style="background: #9e9;"></div>
<p style="background: #6s6;"></p>
<p style="background: #555;">
	<span>点击</span>
</p>
<p style="background: #666;"></p>
<p style="background: #5a5;"></p>
<p style="background: #5f5;"></p>
<p style="background: #f5f;"></p>
<!--弹出层-->
<div class="d" style="display: none;">
	<i>×</i>
	<div class="con"></div>
</div>

script:

(function(){
	var scrollTop = 0;
	// 显示弹出层
	$("span").click(function(){
		// 在弹出层显示之前，记录当前的滚动位置
		scrollTop = getScrollTop();
		// 使body脱离文档流
		document.body.classList.add('modal-open'); 
		// 把脱离文档流的body拉上去！否则页面会回到顶部！
		document.body.style.top = -scrollTop + 'px';
		$(".d").show();
	}) 
	// 隐藏弹出层
	$(".d i").click(function(){
		$(".d").hide();
		// body又回到了文档流中
		document.body.classList.remove('modal-open');
		// 滚回到老地方
		to(scrollTop);
	})
	function to(scrollTop){
		document.body.scrollTop = document.documentElement.scrollTop = scrollTop;
	}
	function getScrollTop(){
		return document.body.scrollTop || document.documentElement.scrollTop;
	}
		
}());