经过初步排查,发现几个现象:
- 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(); };