Auto scroll at bottom of div

Question

I have a div with an overflow set to scroll, which essentially passes a row of data line by line from the file. I would like to scroll automatically to the bottom of the div whenever the stream overflows, but without using the "Click here to scroll down" button.

I already know the solution scrollTop = scrollHeight, but the client needs some kind of event trigger. I do not want this element to be interactive; it must scroll by itself.

Is there any way to achieve this?

Answer 1

There is no way to automatically scroll the item to the bottom. Use element.scrollTop = element.scrollHeight.

, , poller:

(function(){
    var element = document.getElementById("myElement");
    var lastHeight = element.scrollHeight;
    function detectChange(){
        var currentHeight = element.scrollHeight;
        if(lastHeight != currentHeight){
            element.scrollTop = currentHeight;
            lastHeight = currentHeight;
        }
    }
    detectChange();
    setInterval(detectChange, 200); //Checks each 200ms = 5 times a second
})();

Answer 2

- , , , , .

var chatscroll = new Object();
chatscroll.Pane = 
    function(scrollContainerId)
    {
        this.bottomThreshold = 25;
        this.scrollContainerId = scrollContainerId;
    }

chatscroll.Pane.prototype.activeScroll = 
    function()
    {
        var scrollDiv = document.getElementById(this.scrollContainerId);
        var currentHeight = 0;

        if (scrollDiv.scrollHeight > 0)
            currentHeight = scrollDiv.scrollHeight;
        else 
            if (objDiv.offsetHeight > 0)
                currentHeight = scrollDiv.offsetHeight;

        if (currentHeight - scrollDiv.scrollTop - ((scrollDiv.style.pixelHeight) ? scrollDiv.style.pixelHeight : scrollDiv.offsetHeight) < this.bottomThreshold)
            scrollDiv.scrollTop = currentHeight;

        scrollDiv = null;
    }

Answer 3

A lot of scrollHeight implementations didn't work for me, offsetHeight seemed to do the trick.

Pretty sure scrollHeight is trying to move it to the bottom of the height of the static element, not the height of the scrollable area.

var pane = document.getElementById('pane');
pane.scrollTop = pane.offsetHeight;