ios页面键盘消失页面不回弹问题

在ios移动端页面进行表单输入会遇到一个Bug,就是当对输入框进行输入,唤出键盘时,键盘会将页面顶起一段距离。但是当输入完成,隐藏键盘后,页面并不会回弹,就会留出一大片空白。

解决思路:
发现有空白的时候把页面滚动一下,就会恢复正常,所以就用JS在输入结束后,帮用户稍稍滚动一下屏幕。
如果之前能记录下页面滚动的高度,就在此基础上移动1px ,如果没有记录,就直接滚动到顶端,用户不会有什么感知。

代码:

var u = navigator.userAgent;
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
if(isiOS){
    document.body.addEventListener('focusout', function(){
        setTimeout(function(){
            var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
            window.scrollTo(0, Math.max(scrollHeight - 1, 0));
        }, 100);
    });
}
posted @ 2021-04-22 18:20  这个少年有点热丶  阅读(384)  评论(0编辑  收藏  举报