What is the difference between offsetHeight and scrollHeight of an element in DOM?

Question

In the DOM, what is the difference between an element's offsetHeight and its scrollHeight ? An image in explanation would be a great help.

Answer 1

HTMLElement.offsetHeight is a measurement which includes the element borders, the element vertical padding, the element horizontal scrollbar (if present, if rendered) and the element CSS height. HTMLElement.scrollHeight is a measurement of the height of an element's content including content not visible on the screen due to overflow. The value returned by HTMLElement.scrollHeight WILL include the padding-top and padding-bottom, but will NOT include the element borders or the element horizontal scrollbar.

This page and this page are my sources.

The MDN documentation also provides images to demonstrate.

Answer 2

As @Csarsam said, offset height is the border-box height (I'm rewording). Scroll height, is the height of the scrollable content, which is generally composed of multiple elements. But scroll height it also defined on elements which does not scroll, hence does not have a scrollable content, in which case (I've checked but I have no reference to back it up) scroll height is its content height, that is, it does not include the margins and borders. But when the element is part of a scrollable content, its margin are taken into account to compute the scroll height of its parent.

Scroll height is defined on both scrollable content and non‑scrollable content, that's what may confuse.

Update

Here is a reference which confirms what I've checked: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight