手机端点击出现弹层，弹层下面的内容不能滚动方法

1.如果弹层内容不可以滚动，那就用粗暴的方法：

var DivScroll = function(ele) {
if(!document.querySelector(ele)) return;
this.popupLayer = document.querySelector(ele);
this.startX = 0;
this.startY = 0;
this.popupLayer.addEventListener('touchstart', function(e) {
this.startX = e.changedTouches[0].pageX;
this.startY = e.changedTouches[0].pageY;
}, false);
this.popupLayer.addEventListener('touchmove', function(e) {
e.stopPropagation();


var deltaX = e.changedTouches[0].pageX - this.startX;
var deltaY = e.changedTouches[0].pageY - this.startY;
// 只能纵向滚
if(Math.abs(deltaY) < Math.abs(deltaX)) {
e.preventDefault();
return false;
}


if(this.offsetHeight + this.scrollTop >= this.scrollHeight) {
if(deltaY < 0) {
e.preventDefault();
return false;
}
}
if(this.scrollTop === 0) {
if(deltaY > 0) {
e.preventDefault();
return false;
}
}
}, false);
}

出现弹层是调用：

var divScroll = new DivScroll('弹层的名称');

2.如果弹层内容可以滚动：

需引用iscroll插件，用iscroll5；

首先，写一个背景层：

<div class="tkBg"></div>

.tkBg  {

display:none;

1. width: 100%;
2. height: 100%;
3. background: rgba(0,0,0,.3);
4. position: fixed;
5. top: 0;
6. left: 0;
7. z-index: 100;

}

然后再写弹框内容

<div class='tkBox'>

 <div class='cont'></div>

</div>

.tkBox{

 position:fixed;

z-index:101;

//其他的略，重要的是z-index，比背景层高

}

最后出现弹框事件这么搞:

$('.tkBg').show();

$('.tkBox').show();

$('.tkBg').on('touchmove', function(e) {
e.preventDefault();
}, false);

new IScroll('.cont');   //这个方法如果弹框里的内容是固定的，在开始加上就好了；如果弹框内容是动态获取的，那就需要再获取内容后加上；