Detailed explanation of HTML element height, offsetHeight, clientHeight, scrollTop, etc.

Some attributes about elements

In the daily development of the front-end, we often inevitably need to obtain or monitor the properties of some pages, so we need to often understand the meaning of some properties in order to better use these properties. In particular, these:

• Size related: offsetHeight, clientHeight, scrollHeight;
• Offset related: offsetTop, clientTop, scrollTop, pageYOffset, scrollY;
• Get the relative viewport position: Element.getBoundingClientRect();
• Get the style object of the element: Window.getComputedStyle(Element);

Definition of Attributes

About size-related attribute definitions:

offsetHeight: Element.offsetHeight is a read-only property that returns the value of the height px of the element. It is an integer value and there is no decimal.

• Hidden elements return 0;
• Other returns: the innerHeight + padding + border + margin + scrollbar of the element, but not including the ::before or ::after pseudo-elements inside;

clientHeight: Element.clientHeight is a read-only property that returns the height px value of the element. It is an integer value and there is no decimal.

• For inline elements that have no style set, the returned value is 0.
• For html elements or body in quirks mode, the returned value is the viewport height, which is the height of the entire page viewport.
• In other cases: the innerHeight + padding of the element, excluding borders, margins, and scrollbars;

scrollHeight: is a read-only property. It returns the height px value of the element. It is an integer value without decimals.

• If the child element does not scroll, it is the same as Element.clientHeight
• If the child element is scrollable, it will be the sum of the clientHeight heights of all child elements + their own padding;

window.innerHeight: (browser window height, excluding toolbars, menus, etc., only the height of the visible area DOM)
window.outerHeight: (browser window height, including toolbars, menus, etc., the height of the entire browser)

About offset:

offsetTop: a read-only property that returns the top distance of an element from the inner edge of the nearest relatively positioned parent element. In actual use, there may be compatibility issues due to inconsistent relatively positioned parent elements caused by different styles.
clientTop: The width of the top border
scrollTop：

• For scrolling elements, this is the distance that has been scrolled.
• For HTML, it is window.scrollY

window.scrollY, alias: window.pageYOffset, the distance the root node has scrolled vertically

Relevant data required for development

Get the height of the visible area of ​​the entire page: [No need for the height outside the visible area]

const height = window.innerHeight
    || document.documentElement.clientHeight
    || document.body.clientHeight;

Get the height of the entire page: [including outside the visible area]

const height = document.documentElement.offsetHeight
    || document.body.offsetHeight;

Get the vertical scroll height of the entire page:

const scrollTop = document.documentElement.scrollTop
    || document.body.scrollTop;

Get the distance of the element relative to the top of the root node:

// For elements positioned relative to the root node const top = Element.offsetTop;

// For elements that are not positioned relative to the root node, you need to loop to getElementTop(element) {
      let actualTop = element.offsetTop
      let current = element.offsetParent

      while (current !== null) {
        actualTop += current.offsetTop
        current = current.offsetParent
      }
      return actualTop
}

// Another method is scroll distance + distance from the top margin of the viewport const top = Element.getBoundingClientRect().top + window.scrollY;

Get the element's top distance relative to the visible area:

const top = Element.getBoundingClientRect().top;

Set the vertical scroll position of the entire page:

const isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");
if (isCSS1Compat) {
    document.documentElement.scrollTop = 100;
} else {
    document.body.scrollTop = 100;
}

This is the end of this article about the detailed explanation of HTML elements' height, offsetHeight, clientHeight, scrollTop, etc. For more relevant height, offsetHeight, clientHeight, scrollTop content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!