Meaning of $(window).scrollTop() == $(document).height() - $(window).height()

Question

The following code is used to detect if a user has scrolled to the bottom of the page and it works.

if($(window).scrollTop() == $(document).height() - $(window).height()){
//do something
}

Problem:

I don't understand why you subtract the height of the window from the height of the document, then compare that to the scroll height to determine whether or not the bottom of the page has been reached. Why isn't it simply

if($(window).scrollTop() == $(document).height()){
//do something
}

or

if($(window).scrollTop() ==  $(window).height()){
//do something
}

score 15 · Accepted Answer · answered Mar 28 '13 at 19:33

15

This is because $(window).scrollTop() returns the position of the top of the page, and $(document).height() returns the position of the bottom of the page. Therefore you need to subtract the height of the window to get the position to compare against, as this will give you the position where the top of the page would be if you were fully scrolled to the bottom.

answered Mar 28 '13 at 19:33

CodePB

1,736
12
19

so how can i change it to from window to just particular div instead? replace (window) with ('#scrollbar') ? could you please tell me the correct syntax, thanks :) – James Smith Mar 23 '15 at 03:25
I believe the following is right, you may want to check cross browser because I've only tested in chrome: http://jsfiddle.net/e1uxn46k/. Essentially you do a very similar thing but you check the div's scrollheight against scrolltop + innerheight. – CodePB Mar 24 '15 at 15:08
Did not work for me. Scroll at bottom: [$(document).height(), $(window).height(), $(window).scrollTop()] are [408, 408, 64]. When I scroll to the top [408, 408, 0]: this is when the equality condition is met and new content gets appended. Weird! I wish to append when I scroll to the bottom. – coder.in.me Jul 05 '16 at 04:44
I just wanted to flag this, in case it is helpful to other people. This code will work at 100% browser zoom, but it won't necessarily work at other zoom levels. See this discussion here for more info: https://stackoverflow.com/questions/8670682/infinite-scrolling-stops-if-i-zoom-my-browser – Milo Jun 27 '17 at 23:08

score 3 · Answer 2 · answered Mar 28 '13 at 19:35

$(window).scrollTop() is the location of the top of the window relative to the document. On the page I'm looking at right now, that's 1385 if I'm scrolled to the very bottom. $(document).height() is the height of the entire page (1991 for me). $(window).height() is the height of the window (viewport) (606 for me). This means that the position of the top of the viewport plus the height of the window is the position of bottom of the viewport. 1385 + 606 = 1991.

score 0 · Answer 3 · answered Mar 28 '13 at 19:34

The scrollTop value will never be as high as the document height value. That would mean that you scrolled past the document so that it's all outside the window.

Comparing scrollTop to the window height would only mean that you have scrolled one screen down, not to the bottom of the document.

Subtracting the window height from the document height gives you the value where scrollTop will be, when the bottom of the window is at the bottom of the document.

Meaning of $(window).scrollTop() == $(document).height() - $(window).height()

3 Answers3

Linked