Question

I need to make a certain div contents to simulate a scroll, when new data is added, kind of like facebook chat. How do I go about this? I’m using jQuery.

Here’s a markup sample :

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

Answer 1

First, you need to put a fixed height (height: 400px) on the container div (chat-messages) and a scroll(overflow-y:scroll) for vertical content to make the scroll appear.

Next, when a new message is posted, you need to scroll down using javascript.
For example:

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

Or animate the scroll:

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