我创建了一个在浏览器中运行并提供聊天支持的应用程序。这适用于台式机和移动设备,并显示为固定页脚。

在台式机上,一切正常,看起来很棒,但是当它移动到移动设备时,我看到一个奇怪的问题。

当我不在页面顶部并打开键盘时,一切正常:


但是如果我在页面顶部附近,则工具栏会中断并显示在页面的一半位置:


我在其他人提到的地方找到了以下链接,但是我无法隐藏页脚,因为我需要显示它:
http://forum.jquery.com/topic/how-to-set-footer-fixed-at-bottom-even-if-virtual-keyboard-is-open

关于如何解决此问题的任何建议都非常好,我读到iOS新增了对固定位置的支持,但在这种情况下似乎不可行(从网页顶部打开虚拟键盘)。

这是我的代码:

#gc_toolbar_layout {
    ...
    position: fixed;
    word-break: keep-all;
    word-break: break-word;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}


谢谢。

最佳答案

令人难以置信的问题修复:

$(document).on('focus', 'textarea', function() {
    $("#gc_chat_layout").css({position: 'relative', float: 'right', bottom: 'auto'});
    $(document).scrollTop($(document).scrollTop());
});
$(document).on('blur', 'textarea', function() {
    $("#gc_chat_layout").css({position: 'fixed', float: 'none', bottom: '0'});
});


当我们不在页面顶部时,我们只会看到上述问题。基本上,这会立即将您带到页面顶部。

我们还通过将您的旧职位保存在变量中,并在完成后将您移回那里来添加了一些JavaScript代码来处理该问题。

10-06 13:31
查看更多