Chat scroll bar

Question

I'm working on my chat box, when new posts are added to the bottom, how could I make the scroll bar follow new data at the bottom as its added, or stay where you are if say your in the middle rereading something, kinda like most irc clients do?

Answer 1

You can modify the element's scrollTop property. Whenever you want to set it to the bottom you can just set it to some big number (one that couldn't conceivably be smaller than the height):

element.scrollTop = 100000;

Answer 2

Make it scroll to it's scrollheight:

var el = document.getElementById("theDiv");
el.scrollTop = el.scrollHeight;

Answer 3

When a new message is received first check if the current scroll position is equal to the scrollHeight (or possibly within a small percentage of the scrollHeight, for cases where a user hasn't quite scrolled to the bottom but this is imperceptible).

If it is then simply add the message and set the scrollTop = scrollHeight;

If not then leave it alone.