移動端body設定overflow：hidden失效與設定之後頁面會向上滾動問題

標籤：顯示   scrollto   code   顯示與隱藏   idt   移動端   設定   div   一個   

近期在寫一個多彈窗的頁面時，發現當彈窗出現時底部頁面會出現滾動穿透現象，因此想到當彈窗顯示與隱藏時js動態控制body的overflow的屬性值，即

$("body").css("overflow","hidden");$("body").css("overflow","visible");

在瀏覽器端調試的時候是能夠達到預想中的效果，結果在移動端不管是iOS還是安卓系統都是無效的，在度娘上查看了前輩們的相關部落格得知，這是移動端瀏覽器的一個特性，解決這個問題在網上有三種方法

1.body加position：fixed;width:100%;height:100%;2.給要滾動的元素添加一個父級，設定高度，overflow：auto3.html,body{height:100%;overflow:hidden}

我採用的是第三種方法，證實是很有效果的，但這時出現了另外的一個問題，當彈窗出現即body被禁止滾動時會先滾動到頂部，這樣的話如果使用者觸發彈窗的事件元素位置在頁面的底部，則體驗非常不好，我的解決辦法是：在禁止頁面滾動時擷取頁面滾動的位置，允許頁面滾動時再滾動到原來的位置

擷取頁面滾動位置var scrollToTop=$(window).scrollTop;設定頁面滾動位置$(‘body,html‘).scrollTop(scrollToTop);

　　最開始的時候我用的是$(‘body‘).scrollTop(scrollToTop)設定頁面滾動的位置，結果發現無效，用$(‘html‘).scrollTop(scrollToTop)是有效，為防止意外，最終使用的如上方法

移動端body設定overflow：hidden失效與設定之後頁面會向上滾動問題