我在我的网络应用程序中实现了一个聊天系统,我正在显示消息列表(新消息将在下面附加)和一个消息框,用户可以在其中输入他们的消息。
我目前面临的问题是,当我将新消息添加到列表(附加到最后一行的底部)时,消息框被推到屏幕下方。
如何固定消息框在屏幕上的位置,使其不会被压下?
需要说明的是,消息框将始终位于列表中最后一条消息的下方。这意味着我需要页面自动滚动,以便消息框始终保持在原位,即在屏幕中央
最佳答案
因为你没有分享任何标记,我做了一个我的演示......所以为了停止你的输入框被按下,你需要使用 overflow-y: scroll;
在你的消息框上,像这样给它一个固定的高度:My Fiddle
HTML
<div class="container">
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
</div>
<input type="text" />
CSS
.container {
height: 200px;
width: 200px;
background-color: #ff0000;
overflow-y: scroll;
}
关于javascript - 如何固定文本框在屏幕上的位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12756798/