Make a scrollable element stay "at the bottom" while adding content.

Question

I am building a utility page for a web app that I am working on. I have an element that I want to use as a "console" of sorts.

I get entries for the console via Ajax calls (using prototype's Ajax.PeriodicalUpdater).

The problem I'm having is that when I insert new lines to the bottom of the "console", the scrollbar stays in the initial position (so I always see the top lines unless I manually scroll down).

How can I make the scrollbar automatically stay at the bottom?

I am using prototype for a few libraries that require it in this project, so I would prefer to stick with that or regular javascript if possible.

Just as a note, I already tried this:

onComplete: function() { 
    $('console').scrollTop = $('console').scrollHeight;
}

It almost works, except that it is always "one step behind", and I can't see the most recent item.

Answer 1

new Ajax.PeriodicalUpdater(container, url, {
    onComplete: function() {
        (function() {
            container.scrollTop = container.scrollHeight;
        }).defer();
    }
});

Answer 2

Heh, I was building almost exactly the same thing (an Ajax console) and had issues with my overflowed div not scolling all the way to the bottom.

And Stack Overflow helped me solve it! Hope it helps you too!

http://stackoverflow.com/questions/13362/scrolling-overflowed-divs-with-javascript

EDIT: My question used jQuery, but the problem isn't with the JS framework it's with the CSS attributes you're using. Basically you need get Math.max(div.scrollHeight, div.clientHeight) because some browsers are a bit buggy with those attributes.

Answer 3

Awesome fix, thanks alot.