Take the 2-minute tour ×

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

share|improve this question

3 Answers 3

up vote 1 down vote accepted

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;

Hope that helps.

share|improve this answer

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"} );
        el.setStyles( { "background-color": "white"} );
share|improve this answer

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

share|improve this answer

Your Answer


