Question

GChat keeps the textarea scrolled to the end when new text appears, however if the user scrolls away from the end, it waits until you’ve scrolled back down to continue this behavior.

Using just HTML, Javascript and JQuery, how could one mimic this behavior?

Answer 1

Every time you add data, execute something like:

this.scrollTop = this.scrollHeight;

This is just standard Javascript that forces you to scroll to the bottom. To only force someone to stay scrolled to the bottom when they’re already at the bottom, do something like this:

var elem = document.getElementById('myElementName');
var atBottom = (elem.scrollTop >= (elem.scrollHeight - elem.clientHeight));
// add your text updates here
if(atBottom) elem.scrollTop = elem.scrollHeight;

Example at http://jsfiddle.net/xjmha/4/

(Ignore the other versions of the fiddle… I was failing with jQuery.)