最近在做手機端的彈出菜單，但是菜單彈出來后滑動手機屏幕的話頁面滾動總是會將菜單滑上去，體驗非常不好，所以查了一下彈出菜單時禁止頁面滾動的方法，整理如下：
方法一：彈出菜單時給body和html添加一個css樣式：height:100%;overflow:hidden;彈出層消失再去掉這個類。(只給body添加樣式在安卓機上無效果)
css代碼：.add{height:100%;overflow:hidden;}
JQuery代碼：彈出菜單時給body添加類（.add）
$('body,html').addClass('add');
菜單隱藏時給body去除add類
$('body,html').removeClass('add');
這種方法在彈出菜單時body會回到頂部，所以對這種效果不要求的話可用。
解決：彈出層出現時給body添加樣式position:fixed，並算出當時頁面的scrollTop滾動值，給body一個負的top值來保證body不會回到頂部，彈出層消失時恢復。
方法二：定位層之間好像是不會傳遞事件的，將彈窗之外的元素包在一個div里，給這個div設置定位樣式，給寬高是充滿屏幕的，設置overflow:auto;這樣這個div和彈出層就是兩個定位層，滑動彈出層時不會傳遞到div上的。固定div的高度是屏幕的高度，overflow:auto使滾動發生在div內部，這樣彈出層的滾動就不會傳遞給div了,如果不給設置高度，彈出層的滾動事件仍然會傳遞給body，div就會隨着body滾動。
這種方法在iphone手機上效果不是太好。
方法三：在需要滾動的元素上加上-webkit-overflow-scrolling : touch；
效果待驗證。