Tutorial :Chat scroll bar


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?


Make it scroll to it's scrollheight:

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


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.


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;  

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Next Post »