jQuery height doesn't equal scrollTop

Question

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?

You'll have to subtract the windows height, as `scrollTop` is the top of the window. — adeneo, Jan 09 '15 at 21:57
Also, using [scrollHeight](https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollHeight) is probably more accurate than the documents height. — adeneo, Jan 09 '15 at 21:58

score 8 · Accepted Answer · answered Jan 09 '15 at 22:24

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

});

score 1 · Answer 2 · answered Jan 09 '15 at 22:00

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 
          }

score 0 · Answer 3 · answered Jan 09 '15 at 22:01

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.

score 0 · Answer 4 · answered Jan 09 '15 at 22:01

0

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

answered Jan 09 '15 at 22:01

unobf

7,158
1
23
36

score 0 · Answer 5 · edited May 23 '17 at 12:08

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 */
            }
       });

jQuery height doesn't equal scrollTop

5 Answers5