CODEWITHSUNDEEP
javascriptjquery
Get Off My Lawn
Get Off My Lawn

Reputation: 36311

jQuery height doesn't equal scrollTop

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?

Upvotes: 0

Views: 5886

Answers (5)

Анета Иванова
Анета Иванова

Reputation: 1

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

Upvotes: 0

Chanckjh
Chanckjh

Reputation: 2597

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

});

Upvotes: 8

unobf
unobf

Reputation: 7244

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

Upvotes: 0

Joshua Schumacher
Joshua Schumacher

Reputation: 7

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.

Upvotes: 0

Porschiey
Porschiey

Reputation: 2241

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 
          }

Upvotes: 1

Related Questions