Detect if user has scrolled to the bottom of a div

Question

Possible Duplicate:
Detecting when user scrolls to bottom of div with jQuery

I have a page where I have a header, left menu, content, right menu and a footer. Inside my content I have a div (say id-foo) where I have some data. When user scrolls the page and reaches the bottom of div I have to make an ajax call and bring more data to fill the content there. How can I detect that user has scrolled(page scroll, there is no scroll in div) to bottom of div (foo) .

First result in the google search - http://stackoverflow.com/questions/6271237/detecting-when-user-scrolls-to-bottom-of-div-with-jquery — ShankarSangoli, Apr 02 '12 at 21:10
@RockySingh Is there a principal difference between scrolling a `div` and scrollin a `body`? — kirilloid, Apr 02 '12 at 21:13
@Rocky Singh It is pretty much the same concept though. The same solution should work for you with very little tweeking. — Josh Mein, Apr 02 '12 at 21:13
@RockySingh - You can apply the same logic on document scroll as well. — ShankarSangoli, Apr 02 '12 at 21:13
Neither is the one within the link; if you read through it, you'll see it is the solution you are looking for. — faino, Apr 02 '12 at 21:14

Luke Dennis · Accepted Answer · 2012-04-02T23:02:38.133

You'll probably have to do some math yourself, based on the current screen size and the div position. The code will look roughly like this (untested):

// Cache these values. If the div size changes, divBottom will need to be recalculated.
var $div = $("#yourdiv");
var divBottom = $div.offset().top + parseInt($div.height());

// Bind a scroll event for the whole page
$("body").bind("scroll", function(e)
{
    // Calculate how far down the user has scrolled
    var screenBottom = $(this).scrollTop() + parseInt($(window).height());

    // Test if the div has been revealed
    if(screenBottom > divBottom)
    {
        // do something
    }
});

Detect if user has scrolled to the bottom of a div

1 Answers1