移动端弹窗禁止滚动小结

需求：需要我做一个移动端页面，进入页面带弹窗，点击关闭按钮弹窗消失。

分析：整体移动端页面没什么难度，只要兼容没啥问题，基本就是很easy了，但也遇到点小问题跟大家分享一下。

正常给弹窗的定位就可以width、height 100%，但我担心有些手机会崩，所以高度是直接获取的document的高度，赋值给弹窗。

问题来了：弹窗出现的时候，你滑动屏幕，弹窗总是上下滚动，体验不是很好。

解决方案：当弹窗显示的时候阻止默认行为event.preventDefault();就ok了。

 移动端禁止body滚动的方法（网上查的方法，都试了一遍，很好用）

1、js原生方法：

document.addEventListener('touchmove', function(event) {
event.preventDefault();
}, false);

或者

function stopScroll(e){
document.documentElement.style.overflow='hidden';
}

2、jQuery/Zepto

$('body').on('touchmove',function(event){event.preventDefault();},false);
还有一些方法，例如给弹窗定位什么的，感觉不高级，而且定位的容易穿透，上述几个方法足够用了。

本来以为完事了，完美了，发现点击按钮关闭弹窗的时候，原来的网页的touchmove事件全被阻止了，不能滚动，下边的内容也看不见了，所以：点击弹窗关闭按钮的时候，要解除阻止。

我用的jQuery的方法，一行解决。

$('body').unbind("touchmove");
是的，你没看错，别的方法没试，我感觉这是最简单的了

我还在学习的路上，希望大家共勉！