get the full height of the document, so that when you scroll all the way to the bottom the scrollY value matches the full length of the HTML document

Question

I would like to use JS to calculate how far a user scrolled down a page.

I'm trying to use a combination of scrollY and document.body.offsetHeight

But what I'm finding is that scrollY at the bottom of a page is returning 6883 but the document.body.offsetHeight is returning a value of 7392 - which leaves me in a place where I can't calculate the how far a user scrolled down the document.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight

Typically, offsetHeight is a measurement in pixels of the element's CSS height, including any borders, padding, and horizontal scrollbars (if rendered). It does not include the height of pseudo-elements such as ::before or ::after. For the document body object, the measurement includes total linear content height instead of the element's CSS height. Floated elements extending below other linear content are ignored.

So if I understand this correctly, it's taking into account the document in view of the viewport - so that should return the value of 6883, the same if a user scrolls the full length of the page.

What property do you use to calculate full scrollable view of a document, to compare to the max value of scrollY?

Answer 1

Please try using document.body.offsetHeight-window.innerHeight it should return the expected scrollable value.