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就可以完美解决问题，希望自己可以吸取教训，以后绝对注意样式对功能实现的影响。