jQuery聊天框-在DIV底部向上显示第一条消息
亚当
我有一个聊天DIV，用于发送和接收消息。
当前，消息从DIV的顶部开始，然后向下移动DIV（以红色显示），当它们到达底部时，它们通过Jquery向上推，如下所示：
.scrollTop(activeConversationsDIV[0].scrollHeight);
我想问一下是否有在DIV底部启动消息的方法吗？对于用户而言，这将更有意义，因为他们将看到他们正在键入的内容接近他们键入的位置。
有没有办法从DIV的底部开始向上启动消息流？
谢谢
马格努斯·恩格达尔
您可以使用display: table，display: table-cell和vertical-align: bottom。
这是一个例子：
的CSS
#chat {
display: table;
height: 200px;
width: 200px;
border: 1px solid #000;
}
.chatMessage {
display: table-cell;
vertical-align: bottom;
}
的HTML
<div id="chat">
<div class="chatMessage">
<p>test</p>
<p>test 2</p>
</div>
</div>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
jQuery聊天框-在DIV底部向上显示第一条消息
- 2
聊天的回收站视图不显示底部的第一条消息
- 3
jQuery滚动到聊天框底部
- 4
Rails Bootstrap 模式框始终显示第一条记录
- 5
Python Telegram机器人-机器人可以在聊天中发送第一条消息吗？
- 6
发送到我的聊天机器人的第一条消息挂在加载屏幕上
- 7
Chrome多功能框建议始终始终将“ Google搜索”显示为第一条建议
- 8
聊天框注销消息
- 9
在列表框中查找具有特定值的第一条记录
- 10
Microsoft Access组合框覆盖第一条记录
- 11
聊天框文本转义<div>
- 12
为什么我的第一条机器人消息（通过REST API）显示在我的第一条线程消息之前？
- 13
带有ajax调用的jQuery聊天框仅适用于第一个用户
- 14
获取频道上的第一条消息
- 15
访问Django模板中的第一条消息
- 16
Laravel从聊天表中获取最后一条消息
- 17
AJAX聊天框向上滚动问题
- 18
聊天框滚动到底部？
- 19
聊天框滚动到底部？
- 20
即使刷新也可以保存聊天框消息
- 21
jQuery Validation＆Tooltipter一次显示一条验证消息
- 22
我想更改状态消息，如果成功则显示成功，然后返回我的第一条消息
- 23
在用户选择机器人聊天窗口中的按钮后显示一条消息
- 24
JQuery 在按钮单击时显示上一条消息
- 25
我如何确定发送的消息是否是作者的第一条消息？
- 26
打开多条消息后阅读第一条消息
- 27
如何在文本框中向div显示聊天消息
- 28
CSS将聊天框对齐到屏幕底部
- 29
在angularjs的聊天框中滚动到底部
我来说两句