解决移动端弹窗遮罩内容滚动导致底层body滑动

  一开始就想到是事件冒泡--->移动前端阻止触摸滑动事件冒泡

百度了一下，纠结半天

1.阻止网页内部滚动条mousewheel事件冒泡  （pass）

这个只能隔离鼠标滚动事件，在手机上不管用。。。

2.移动端的touch事件处理（pass）

http://www.tuicool.com/articles/uyE3Ar

这个比较复杂，整了半天没搞定，相信大神是可以搞定的，比较着急就没有继续深入研究

3.隐藏掉body多余的部分（搞定）

 

<script type="text/javascript">
 var scrollTop = $(document.body).scrollTop();//body设置为fixed之后会飘到顶部，所以要动态计算当前用户所在高度
 //禁止滚动条
 $(document.body).css({
　　"overflow-y":"hidden",
　　'position': 'fixed',
　　'top': scrollTop*-1

});
//启用滚动条
 $(document.body).css({
　　"overflow-y":"auto",
　　'position': 'static',
　　'top': 'auto'
 });
  
</script> 

 

 

 

虽然生活不能老想着走捷径，但这个捷径还是让我窃喜良久，哈哈

感谢Html body的滚动条禁止与启用

http://zhidao.baidu.com/link?url=wZo95H-g4ZOqvCrnLC5Chqc94uStalxpxrtcf4AHX37AYHdxtIXXoKWfNA76BvBjoN_K-HOpWAN4pxQMSddGDj1tWVjqinV6QRTcxa52ezW

 

转载于:https://www.cnblogs.com/changlun/p/5287992.html