Menu
In the DOM, what is the difference between an element’s offsetHeight and its scrollHeight? An image in explanation would be a great help.
255
clientHeight: It returns the height of an HTML element including padding in pixels but does not include margin, border and scrollbar height. Syntax: element.clientHeight. scrollHeight: It returns the height of the content enclosed in an html element including padding but not margin, border and scroll bar.
The HTMLElement. offsetHeight read-only property returns the height of an element, including vertical padding and borders, as an integer. Typically, offsetHeight is a measurement in pixels of the element's CSS height, including any borders, padding, and horizontal scrollbars (if rendered).
The scrollHeight property returns the height of an element including padding, but excluding borders, scrollbars, or margins. The scrollHeight property returns the height in pixels. The scrollHeight property is read-only.
Definition and Usage The clientHeight property returns the viewable height of an element in pixels, including padding, but not the border, scrollbar or margin. The clientHeight property is read-only.
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.
OffsetHeight: It is the property that helps to measure the visible height of an element in terms of pixels including the CSS properties like element visible content, vertical padding, border, and scrollbar but not top and bottom margin.
clientHeight property returns the viewable height of an element in pixels, including padding, but not the border, scrollbar or margin. ScrollHeight is all the scrollable area, so your scroll will never run over your margin or border, so that's why scrollHeight doesn't include margin or borders but yeah padding does.
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.
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.
75
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
