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"} );
    }
}

Answer 3

I would suggest that you get the document height, and use that height as the length between the top of your page to the bottom. So :

var bottom = $(document).height() // == the bottom of your page

You can the minus that with the distance with the bottom, that you desire.

If( ( el.scrollTop() + el.outherHeight ) >= ( bottom - 200 ) ){
    // fetch new data

    // Don't forget to upate the bottom variable when data fetched and renderd
}

Hope this solved your problem, or at least helped you find your solution. If not, let me know