移動端彈窗禁止滾動小結

需求：需要我做一個移動端頁面，進入頁面帶彈窗，點擊關閉按鈕彈窗消失。

分析：整體移動端頁面沒什麼難度，只要兼容沒啥問題，基本就是很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");

是的，你沒看錯，別的方法沒試，我感覺這是最簡單的了

我還在學習的路上，希望大家共勉！