經過初步排查,發現幾個現象:
1 只在頁面總長度超過屏幕長度時發生。
2 只在開啓鍵盤時發生。
3 只在固定定位的頁面頂部輸入框獲取焦點(focus)時發生。
4 只在屏幕有滾動時發生。
缺陷有兩個現象:
1 頂部DOM掉下來了,在大約屏幕中間的位置。
2 此時如果繼續滾動屏幕,頂部DOM不會再維持當前位置。也就是説,它“進入”了頁面的文檔流。
我們初步判斷是頂部DOM失去了固定定位,原因未知。怎麼解決呢?
我們決定繞過這個問題,只要看起來是正常的就行。
當點擊頂部DOM輸入框、調出鍵盤的時候:
1 頁面滾回到頂部;
2 屏幕滾動時,關閉IOS輸入面板。
關鍵代碼如下:
$("#search_value").on("focus", function() {
$(window).scrollTop(0)
})
window.ontouchmove = function() {
$('input').blur();
};