使div内容在父级内部上升

Question

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

这是一个标记示例：

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

Answer 1

解决方案与您所描述的类似：

• 使用jQuery AJAX滚动时从服务器加载数据：http://www.codeproject.com/Articles/239436/Load-Data-From-Server-While-Scrolling-Using-JQuery

这里还有其他一些解决方案：

• Scrolling a div with jQuery
• jQuery Scroll to Div
• Scroll to a div using jquery

Answer 2

首先，您需要在容器div（聊天消息）上设置固定高度（height: 400px），并为垂直内容滚动（overflow-y:scroll）以显示滚动。

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

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

或为卷轴设置动画：

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

Answer 3

这将在div的底部添加新内容。我猜这就是你想要的。

$('#chat-messages').append(newdiv);

但我认为你需要做一些背景阅读。 Check this out