最近在做手機端的彈出選單，但是選單彈出來後滑動手機螢幕的話頁面滾動總是會將選單滑上去，體驗非常不好，所以查了一下彈出選單時禁止頁面滾動的方法，整理如下：

方法一：彈出選單時給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；

效果待驗證。