when - Scrolling Overflowed DIVs with JavaScript

jquery window scroll position (8)


The scrollIntoView method scrolls the element into view.

I've got a div that uses overflow:auto to keep the contents inside the div as it is resized and dragged around the page. I'm using some ajax to retrieve lines of text from the server, then append them to the end of the div, so the content is growing downwards. Every time this happens, I'd like to use JS to scroll the div to the bottom so the most recently added content is visible, similar to the way a chat room or command line console would work.

So far I've been using this snippet to do it (I'm also using jQuery, hence the $() function):

$("#thediv").scrollTop = $("#thediv").scrollHeight;

However it's been giving me inconsistent results. Sometimes it works, sometimes not, and it completely ceases to work if the user ever resizes the div or moves the scroll bar manually.

The target browser is Firefox 3, and it's being deployed in a controlled environment so it doesn't need to work in IE at all.

Any ideas guys? This one's got me stumped. Thanks!

scrollHeight should be the total height of content. scrollTop specifies the pixel offset into that content to be displayed at the top of the element's client area.

So you really want (still using jQuery):

$("#thediv").each( function() 
   // certain browsers have a bug such that scrollHeight is too small
   // when content does not fill the client area of the element
   var scrollHeight = Math.max(this.scrollHeight, this.clientHeight);
   this.scrollTop = scrollHeight - this.clientHeight;

...which will set the scroll offset to the last clientHeight worth of content.

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 helped me solve it! Hope it helps you too!

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.

If each message is in a separate element (div, paragraph etc.), you can just call scrollIntoView

Using a loop to iterate over a jQuery of one element is quite inefficient. When selecting an ID, you can just retrieve the first and unique element of the jQuery using get() or the [] notation.

var div = $("#thediv")[0];

// certain browsers have a bug such that scrollHeight is too small
// when content does not fill the client area of the element
var scrollHeight = Math.max(div.scrollHeight, div.clientHeight);
div.scrollTop = scrollHeight - div.clientHeight;

Make a scrollable element stay “at the bottom” while adding content

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

Stick Iframe to Bottom

does the iframe keep refreshing, and adding content.. or does it keep the connection open? if it isn't keeping the connection open... document.scrollTo() is the javascript method you are looking for.. if you are using ajax to append the information.. do a scrollTo where the number is VERY large 0xFFFFFF should work.