javascript - 页面在 iPhone 中存在虚拟键盘时向上滚动

Question

我的网站上有一个聊天应用程序页面。主容器在移动设备上占据完整的高度和宽度。容器有 position: fixed 和里面的 3 个 div position:absolute。最后一个 div #app-msg-composer 有一个 textarea 并像其他聊天应用程序一样在其中发送 button 。以下是简要代码:

<div id='app-container'>
    <div id='app-header'></div>
    <div id='app-body'></div>
    <div id='app-msg-composer'>
         <textarea></textarea>
         <button>Send</button>
    </div>
</div>

#app-container{
    position: fixed;
    height:100%;
    width:100%;
    top: 0px;
    bottom:0px;
}
#app-header{
    position:absolute;
    height:48px;
    width:100%;
    top:0px;
}
#app-body{
    position:absolute;
    top:48px;
    bottom: 74px;
    width:100%;
}
#app-msg-composer{
    position:absolute;
    bottom:0px;
    height:74px;
    width:100%;
}

当 textarea 被点击并获得焦点时，虚拟键盘的存在使得页面的上半部分向上滚动(超出视口(viewport))。此问题仅与 iPhone 有关，因为它在其他 Android 设备上运行良好。我搜索了这个问题，发现这是 iphone 中的一个常见问题，因为:

在 iPhone 上，虚拟键盘的存在不会改变视口(viewport)高度。

我尝试了一些来自 stackoverflow 的解决方案，但没有奏效。由于我没有使用任何库，如何仅在 javascript 或 css 中执行此操作？

Answer 1

您需要将 CSS 属性 position 更改为 fixed。这样，它实际上是“固定的”。它也不能随着屏幕大小的改变而移动。

另一种方法是将其简单地对齐到屏幕的最顶部。应该这样做是为了让 tip 元素保持在顶部，中间在中间......