我有一个用 React 制作的聊天机器人应用程序。我的问题是我的输入字段,它应该始终固定在底部。起初它按预期固定在虚拟键盘上方,但如果我向上滚动大约一半,它就会消失在虚拟键盘下方。此问题仅出现在移动版 Chrome 上,不会出现在 Safari 或三星浏览器上。
这是我的固定输入字段的样子:
输入框的JSX:
return (
<div className={styles.input-field}>
<form onSubmit={submitHandler}>
<textarea value={inputValue} placeholder='Enter your message' onKeyDown={enterKeyHandler} onChange={messageHandler} aria-label='enter your message'></textarea>
<IconButton title="Send" type="submit" aria-label='send'><img src='img/send-button.png' className={styles.button-icon} alt="send"/></IconButton>
</form>
</div>
)
CSS:
.input-field {
position: fixed;
bottom: 0;
width: 100%;
z-index: 2;
}
这是它的父容器的样子:
JSX:
return (
<div className={isOpen ? `${styles.chat-container} ${styles.chat-open}` : `${styles.chat-container} ${styles.chat-closed}`}>
<ChatHeader/>
<div className={styles.chat-inner}>
...
</div>
<ChatInput/> <!-- the affected input -->
</div>
)
.chat-container {
width: 100%;
top: 0;
left: 0;
height: 100vh;
bottom: 0;
overflow: hidden;
border-radius: 0;
box-shadow: none;
position: relative;
z-index: 1;
}
.chat-open {
display: flex;
}
.chat-closed {
display: none;
}
我尝试用
position: fixed
和 position: absolute
替换 position: sticky
但同样的事情发生了。我也尝试过在我的<meta name="viewport" content="minimum-scale=1"/>
元标记中添加index.html
,正如我所看到的那样,但它什么也没做。对于它的价值,当我向上滚动并且标题(也有position: fixed
并且也有相同的行为)进入视口时,问题似乎发生了。再一次,这个问题不会发生在其他浏览器上,也不会在虚拟键盘关闭时发生,所以我在这里有点迷路。任何形式的帮助表示赞赏!