In my jquery I am trying to calculate when the scrollbar is 100px from the bottom, and when it gets there I will do an ajax query (for now I am doing an alert as you can see).

$(document).on("scroll", function(e){
    var scrollHeight = $(document).height();
    var offset = $(document).scrollTop();
    console.log(scrollHeight);
    console.log(offset);
    if(scrollHeight - offset <= 100){
        alert("here");
    }
});

For some reason that I can not figure out it doesn't work. If I scroll to the bottom I would assume that the height() would equal scrollTop() but it doesn't, and here is what it shows:

scrollHeight = 1923
offset = 998

Am I using the wrong methods for this?

In my jquery I am trying to calculate when the scrollbar is 100px from the bottom, and when it gets there I will do an ajax query (for now I am doing an alert as you can see).

$(document).on("scroll", function(e){
    var scrollHeight = $(document).height();
    var offset = $(document).scrollTop();
    console.log(scrollHeight);
    console.log(offset);
    if(scrollHeight - offset <= 100){
        alert("here");
    }
});

For some reason that I can not figure out it doesn't work. If I scroll to the bottom I would assume that the height() would equal scrollTop() but it doesn't, and here is what it shows:

scrollHeight = 1923
offset = 998

Am I using the wrong methods for this?

• javascript
• jquery

• You'll have to subtract the windows height, as scrollTop is the top of the window. – adeneo Commented Jan 9, 2015 at 21:57
• Also, using scrollHeight is probably more accurate than the documents height. – adeneo Commented Jan 9, 2015 at 21:58

5 Answers 5

You need to add the height of the window with scrollTop. Link

$(document).on('scroll', function () {
    var docHeight = $(document).height(),
        scrollTop = $(document).scrollTop(),
        windowHeight = $(window).height();

    if (docHeight - (scrollTop + windowHeight) <= 100) {
        alert(docHeight - (scrollTop + windowHeight));
    }

});

Looks like you might be forgetting to subtract the pane's view-able height. I've done something similar in my code here:

          var scrollPos = $('#viewable-div').height() - $('#scrolling-content').height();
          if ($("#scrolling-content").scrollTop() > (scrollPos - 100)) {
              //load more 
          }

When you scroll the element all the way down, scrollHeight should be equal to scrollTop + clientHeight.

If the element has no scrollbars scrollWidth/Height should be equal to clientWidth/Height.

• When the element has no scrollbars IE makes the scrollHeight equal to the actual height of the content; and not the height of the element. scrollWidth is correct, except in IE8, where it’s 5 pixels off.

• Opera gives odd, incorrect values.

You can use a statement like this

((container.scrollTop() + container.height() + detectionOffset) >=
         container.get(0).scrollHeight)

Where container could be the document.body and detectionOffset would be 100

This has been answered a few times before, including here

One piece of code that I'm using and is always working (even on Opera) is this:

$(window).on("scroll", function () {
            var scrollHeight = $(document).height();
            var scrollPosition = $(window).height() + $(window).scrollTop();
            if ((scrollHeight - scrollPosition) / scrollHeight === 0) {
                /* Do something */
            }
       });