10

If I have a div with overflow:auto so that it is a scrollable div and I load it with information that makes a significant scroll area, is there a way that when I load the information, the div shows the bottom results? Or essentially scrolls to the bottom?

I've seen jQuery solutions but this is for use in an HTA so I cannot use jQuery. Is there a purely javascript way to accomplish this?

Eborbob
  • 1,905
  • 1
  • 15
  • 30
thepip3r
  • 2,855
  • 6
  • 32
  • 38

5 Answers5

13
var myDiv = document.getElementById('myDiv');
myDiv.scrollTop = myDiv.scrollHeight;

Works in Firefox, Safari, Opera, Chrome and even Internet Explorer, which is more than I can say for the SSE test case I Set up... lol

I will spare you the rant about the obtuse solutions offered by others, and here is an example of code that could be used for an instant messaging type client.

document.body.onload = function()
{
    var myDiv = document.getElementById('myDiv');
    // Pick your poison below, server sent events, websockets, AJAX, etc.
    var messageSource = new EventSource('somepage');
    messageSource.onmessage = function(event)
    {
        // You must add border widths, padding and margins to the right.
        var isScrolled = myDiv.scrollTop == myDiv.scrollHeight - myDiv.offsetHeight;
        myDiv.innerHTML += event.data;
        if(isScrolled)
            myDiv.scrollTop = myDiv.scrollHeight;
    };
};

The part of that example that is relevant checks to see if the div is already scrolled to the bottom, and if it is, scrolls it to the bottom after adding data to it. If it is not already scrolled to the bottom, the div's scroll position will stay such that the visible content of the div is unaffected by adding the data.

Joshua W
  • 1,103
  • 12
  • 29
11
document.getElementById('mydiv').scrollTop = 9999999;

The scrollTop property specifies the scrolling offset in pixels from the top of the region. Setting it to a very large value will force it to the bottom.

Phrogz
  • 296,393
  • 112
  • 651
  • 745
  • I tried to use: function jsDivBottom(divID, strMsg) { var myDiv = document.getElementById(divID); myDiv.innerHTML = strMsg myDiv.scrollTop = 9999999; } and it's not scrolling to the bottom. the message is applying so i know the other part is working... any suggestions? – thepip3r Jan 05 '11 at 18:54
  • i did an alert() on my .scrollTop parameter right after I set it to 9999999 and it's reporting back 0. For whatever reason, even though I'm setting it, it doesn't appear to be taking. – thepip3r Jan 05 '11 at 19:41
  • nm... i was writing my content to a span and trying to set the scrollTop param on it. I repointed to the encasing div and this partially works. it seems to scroll about a third of the way down. i tried to add a few extra 9s but with no effect. any suggestions? – thepip3r Jan 05 '11 at 19:48
1

How about this?

function scroll_to_max(elm) { // {{{
    if(!scroll_to_max_el) {
        scroll_to_max_el = elm;
        setTimeout(scroll_to_max, 10); // Allow for the element to be updated
    } else {
        var el = scroll_to_max_el;
        var t = el.scrollTop;
        el.scrollTop = t+100;
        if(el.scrollTop != t) {
            setTimeout(scroll_to_max, 10); // Keep scrolling till we hit max value
        } else {
            scroll_to_max_el = null;
        }
    }
}
var scroll_to_max_el = null; // Global var!
// }}}

(NOTE: Only tested it in Chrome...)

Toby
  • 11
  • 1
1

Late answer but this is much more helpful

$('#mydiv').scrollTop(($('#mydiv').height()*2));

MichaelM
  • 488
  • 1
  • 5
  • 16
0

I think you need to set the scrollTop after the element is updated.

setTimeout(function (){ 
  el.scrollTop = 999999999
}, 10)

also, in chrome at least, 99999999999 will scroll to the bottom. but 999999999999 (an extra 9) will scroll to the top. it's probably converted to an int in the C side of webkit.

ketan
  • 19,129
  • 42
  • 60
  • 98
dominic
  • 571
  • 4
  • 7