Load Data From Server While Scrolling a Div to Bottom

Question

I need to load data inside a div only when I reached near the bottom of the div through scroll.

The problem am facing is the $('div').scrollHeight() and the $('div').scrollTop() values are not same when it reaches the bottom, so I can't identify that the scroll reached the bottom or not.

How can I identify the div scroll have reached near the bottom(or may be bottom minus some length)?

Please advice...

Note: Basically am trying to do the same like in Facebook ticker.

Regards, Navin

Answer 1

There's lots of scroller samples on the web the code below is from this one.

...
    if(container.scrollTop+container.clientHeight == container.scrollHeight){
                startRow = parseInt(startRow) + 10;
                getData();
    }
...

Hope that helps.

Answer 2

Heres a JSFiddle scroll it uses scrollTop + clientHeight to compare against scrollHeight. See if that works for you, sorry its in Mootools but it pretty straight forward.

function HandleScroll()
{
    var el = $("outer");
    if( (el.scrollTop + el.clientHeight) >= el.scrollHeight )
    {
        el.setStyles( { "background-color": "red"} );
    }
    else
    {
        el.setStyles( { "background-color": "white"} );
    }
}