What does scrollTop jQuery mean?

Question

I am working on some jquery code using the scrollTop method to implement infinite scroll (please don't offer jQuery plugins, I know they exist) and I don't quite understand what that means.

Given this script: https://jsfiddle.net/ve8s5fdx/

<div id="outter"> <div class="inner"></div> <div class="inner"></div> </div> <div id="scroll"></div> 

 #outter { height: 100px; width: 100%; overflow-y:auto; } .inner { height: 150px; width: 50%; border: dashed black 2px; background-color: grey; } 

It makes sense that the value is 0 when the scroll bar is at the very top of the element, but why is “208” when it is at the bottom? #outter div has a height of 100px, its contents are slightly larger than 300px.

Answer 1

What @Rory McCrossan said. If you scroll 100px, 100 will be displayed on .scrollTop. scrollTop will measure the space between the window and the element. So no matter how tall your element is, it will always occupy space above it.

Since your .inner missing the css rule box-sizing: border-box; , the border will be added outside the div, and the width will be 2px. Which in your case means that each .inner element has a height of 154 pixels. You have 2 of them, so the content of .outer is 308px.

Your .outer element is 100 pixels high, so 100 pixels will always be visible. Therefore, when your window scrolls to the very bottom, scrollTop displays 308px - 100px = 208px.

If you change your .outer to a height of 50 pixels, scrollTop will show 258 pixels when scrolling down.

Answer 2

$. scrollTop :

The vertical scroll position coincides with the number of pixels that are hidden from view above the scrollable area. If the scroll bar is at the very top, or if the item does not scroll, this number will be 0.

Checking your violin, you can see that your two .inner have a total height of 308 pixels. Your outer (scrollable) div is 100 pixels high.

So, your .scrollTop() , the number of pixels that are hidden from view above the scrollable area, is total inner height - visible height or 208 px.