Modal模态框的防穿透问题，模态框弹出后，禁止body滑动事件

我封装的模态框生成是这种结构的



代码插入：

<div class="wx-dialog">
<div class="dialog-content" id="pageinfo">
<p class="pop-title">温馨提示</p>
<div class="pop-content">网络不给力哦，请重新进入~</div>
<p class="btn"><span class="confirmbtn" style="width:100%;">知道了</span></p>
</div>
</div>

$('.pop-content')的max-height是200px，当内容超过200px时，会有滚动条。

需要判断①手指touch的位置是否为.pop-content或者.pop-content的内容，若不是则阻止滚动；

②判断滚动条是否在.pop-content的最上方或者最下方，若是则阻止滚动。

于是有了下面的代码：

var popCnt = $(".pop-content");
// 获取滚动条最高高度(内容总高度-显示的高度)
var maxScrollTop = popCnt[0].scrollHeight - popCnt.height(), touchStartY = 0;
// pop-content
$("body").on("touchstart", function(e) {
touchStartY = e.originalEvent.targetTouches[0].pageY;
}).on("touchmove",function(e) {

// 值是负数为往上滑，说明还在往下滚
// 正数为往下滑，说明还在往上滚
var moveLength = e.originalEvent.targetTouches[0].pageY- touchStartY;
if (e.target.className != "pop-content"&& $(e.target).parents(".pop-content").length == 0) {
e.preventDefault();
} else {
var scrollTop = popCnt.scrollTop();

// if(如果滚动底了还在往下滚 || 如果滚到头了还在往上滚)
if (((scrollTop) >= maxScrollTop && moveLength < 0)|| (scrollTop <= 0 && moveLength > 0)) {
e.preventDefault();
}
}
});

判断手指touch的点是否为.pop-content或者.pop-content的内容，比较好理解，我就不再解释了，

重点是下面的条件：判断滚动条是否滚动到底或者到顶。

我在这里遇到一个大坑。之前做项目的时候我测试了好多次就是不好使，所有的modal都无法阻止背后body的滑动事件，

尤其是在微信浏览器，还会拉出上下的黑色网址部分。

最后终于找出原因，是我在.pop-content中加了padding:15px;导致scrollTop的值直接少了30px，

所以scrollTop+30px就可以完美解决问题，希望自己可以吸取教训，以后绝对注意样式对功能实现的影响。