Document height

Height of the web page document.

• document.body.scrollHeight

Window outer height

Outer height of the browser window, including all interface elements (toolbars/scrollbars, etc).

• window.outerHeight or just
• outerHeight

Window inner height

Height of the browser window content area.

• window.innerHeight or
• innerHeight

Scrolled height of document

• window.scrollY
• same as window.pageYOffset but this is no longer supported in modern browsers.

The number of pixels by which the DOCUMENT is currently scrolled vertically. This value is subpixel precision meaning that it is not necessary a whole number. Positive value neans the content is scrolled down. This is it returns the Y coordinate of the top edge of the current viewport.

Element

getBoundingClientRect()

This function returns an object which is the smallest rectange which contains the entire element incuding its padding and border-width. This object has properties left (or x), top (or y), right, bottom, width and height. Except width and height, all properties are relative to the top-left of the viewport.

Element top from top of inner window or viewport

• elem.getBoundingClientRect().top

Element top from top of page

• elem.getBoundingClientRect().top + window.scrollY

Element bottom from top of inner window or viewport

• elem.getBoundingClientRect().bottom

Element bottom from top of page

• elem.getBoundingClientRect().bottom + window.scrollY

Condition check for page scrolled to bottom

When page is scrolled to bottom, the scrolled distance plus viewport height is equal to the document height.

• window.scrollY + window.innerHeight === document.body.scrollHeight