Why window.scrollY !== document.body.clientHeight @ maximum scroll point

Question

Why isn't window maximum scroll equal to body height?

I am trying to do some effect with the friction between the maximum scroll and current scroll.

Answer 1

This is because window.scrollY will give you the coordinate of the left top corner. You will see that if you add the height of the window to window.scrollY at the max scrolling point, you will have the height.

Example : My window has as an innerHeight of 599, My body has a height of 1797, The value of window.scrollY at the maximum scrolling point is 1198, If I do 1198 + 599 I obtain 1797 that is the right height of my document.

1198 + 599 = 1797

Just keep in mind that the value of window.scrollY is in the top left corner of the document.

Answer 2

See Element.clientHeight:

The Element.clientHeight read-only property is zero for elements with no CSS or inline layout boxes, otherwise it's the inner height of an element in pixels, including padding but not the horizontal scrollbar height, border, or margin.

clientHeight can be calculated as CSS height + CSS padding - height of horizontal scrollbar (if present).

There might be a margin assigned to the body.