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.
source share