Question

how do I find out if the user scrolled up to the top or down to the bottom in a scrollable container?

Does jQuery offer any mechanisms?

css:

#container {
    display: block;
    width: 250px;
    height: 25px;
    background: green;
}
#scrolling {
    width: 250px;
    height: 300px;
    backround: red;
    overflow: auto;
}

http://jsfiddle.net/Hmaf2/2/

Thanks a lot!

Pat

Answer 1

You can test the scroll position by comparing the height, scrollable height and scroll offset of the div:

$(document).ready(function(){
    $('#scrolling').scroll(function(){
        var scrollTop = $(this).scrollTop();
        var iheight = $(this).innerHeight();
        var sheight = this.scrollHeight;
        var text = '';
        if (scrollTop <= 5) {
            text = 'top';
        }
        else if (scrollTop+5 >= sheight-iheight) {
            text = 'bottom';
        }
        else {
            text = scrollTop+' middle ('+iheight+','+sheight+')';
        }
        $('#result').text(text);
    });
});

fiddle
This example has reserved 5 pixels from the top and bottom of the div’s margin.