javascript - 使 div 内容在父级内部向上

Question

我需要制作某个div内容来模拟滚动，当添加新数据时，有点像facebook聊天。我该怎么办？我正在使用 jQuery。

这是一个标记示例:

<div id="chat-messages">
   <div class="msg">John Doe says : Hi!</div>
</div>

Answer 1

首先，您需要在容器 div(聊天消息)上放置固定高度(height: 400px)和滚动条(overflow-y:scroll)使垂直内容出现滚动。

接下来，当发布新消息时，您需要使用 JavaScript 向下滚动。例如:

$(".chat-messages").attr({ scrollTop: $(".chat-messages").attr("scrollHeight") });

或者为滚动设置动画:

$(".chat-messages").animate({ scrollTop: $("chat-messages").attr("scrollHeight") }, 1000);