Search code examples
javascriptjquerydomscroll-position

Maintain scroll position for a div based on scroll bar position

I've got my code written here.

setInterval(
    function (data){
        var alreadyScrolled = $("#smallBox").height() >= $("#smallBox").get()[0].scrollHeight;
        
        
        $("#smallBox").append(data + "<br />");
        if (alreadyScrolled) {
            $("#smallBox").scrollTop($("#smallBox").heightoffsetHeight)
        }
    },
    1000, 
    Date()
);


<div id="largeBox">
    <div id="smallBox">
    </div>
    <input />
</div>

What I'm trying to do is, detect if the scroll bar is at the bottom of the window, and if it is, append the new data into the div, then scroll back down to the bottom. In the event that the scroll isn't already at the bottom, do nothing.

I'm not sure which parts of either the DOM or jquery API I can use to accomplish this, I've been trying multiple things and am somewhat stuck here, nothing seems to give me a value in terms of where the scroll bar is, and how much I can can scroll. A percent value would be awesome if I could just get that.

I don't want to use any libraries outside of jQuery, this means no plugins either.

I'm looking to get the same behavior we see in the SO chat rooms, except that it seems to be using the ScrollTo plugin to accomplish what it does.

Update.

I can't just use .height() and .scrollTop, they don't match up.

See this: http://jsfiddle.net/qSx3M/6/

Solution

  • I think this is what you're after?

    http://jsfiddle.net/qSx3M/7/

    Code:

    var alreadyScrolled = $("#smallBox")[0].scrollTop + $("#smallBox").height() == $("#smallBox")[0].scrollHeight;