移动端、pc端，遮罩层滚动穿透问题

常见的解决方式有一下三种：

1. css 之 overflow: hidden；

	.model-open {
		overflow: hidden;
		height: 100%;
	}

遮罩层显示时将 .modal-open 添加到 html上，删除多余一页的部分，禁止页面滚动。
遮罩层隐藏时，移除.modal-open，恢复页面滚动即可；
缺点：

• pc端有效，移动端无效

2. js 之 touchmove 的preventDefault + css之overflow: hidden

//实现滚动条无法滚动
var mo=function(e){e.preventDefault();};

/***禁止滑动***/
function stop(){
        document.body.style.overflow='hidden';        
        document.addEventListener("touchmove",mo,false);//禁止页面滑动
}

/***取消滑动限制***/
function move(){
        document.body.style.overflow='';//出现滚动条
        document.removeEventListener("touchmove",mo,false);        
}

遮罩层显示时，禁止滑动。
遮罩层消失时，取消滑动限制。

优点：移动端，pc端都有效（移动端仅限遮罩层内不需要滚动的页面）

缺点：

• 当遮罩层内部也要求滚动时，其内部无法滚动。（touchMove禁止了页面的所有滚动）

针对缺点 (touchMove禁止滚动，使得遮罩层内部无法滚动) 的解决方法：
在内部需要滚动的区域使用iscroll插件（由于iscroll插件的滚动使用的是translate的原理，固不受touchMove被禁的影响）；

  // 引入iscroll.js;
  //在进入遮罩层时，执行如下操作。
  function scroll(){
	  	var myScroll = new IScroll('#scroller', {
			mouseWheel: true,    //鼠标滚轮
			click:true,
			fadeScrollbars: true
		});
 }
 //   iScroll.js滚动原理：
//        利用transform改变定位的位置,固不受touchMove被禁止的影响
//    注意事项:
//        初始化时,滚动显示容器的高度是固定的,内部需要滚动的元素高度不定,只要超出容器高度即可 

//	  iScroll.js的api地址: http://wiki.jikexueyuan.com/project/iscroll-5/scrollers.html

// 利用iscroll.js插件解决touchMove被禁下的滚动，完整代码见：
我的github
https://github.com/yiyueqinghui/iscroll

3. css之position: fixed

body.modal-open {
	position: fixed;
	width: 100%;
}

遮罩层显示时，添加 .modal-open
遮罩层消失时，移除 .modal-open
优点

• pc ,移动都有效
• 即使遮罩层内部要求局部页面滚动，其也可以滚动（解决了方法2的不足）

缺点

• 给body添加fixed定位时，会有页面回滚回顶部的问题。使得再次取消fixed定位时，页面一直在顶部，而非打开页面时，页面所在的位置

为解决fixed方法的如上缺点，优化如下

原理：显示遮罩层之后，记录页面滚动位置，改变fixed定位的top值。 隐藏遮罩层之前，移除fixed定位，将页面滚动到当初记录下的滚动位置

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.scrollingElement.scrollTop = scrollTop;
		}
	};
})('modal-open');

/***进入遮罩层，禁止滑动***/
function stopScroll(){
     ModalHelper.afterOpen();
}

/***取消滑动限制***/
function allowScroll(){
     ModalHelper.beforeClose()
}

具体效果看见参考链接底部demo

参考页面：
https://blog.youkuaiyun.com/luotianyi1205/article/details/78223083