• High page visible area: the document. The body. ClientHeight
  • High page of text in full: document. Body. ScrollHeight
  • High page visible area (including the side) : document. Body. OffsetHeight
  • The page is rolled high: document.body.scrolltop
  • High screen resolution: window.screen.height

Each HTML element has five attributes: clientHeight offsetHeight scrollHeight offsetTop scrollTop. These attributes are related to the height, scroll, and position of the element. By reading their documentation, the rules are as follows:

The clientHeight and offsetHeight attributes have nothing to do with the element’s scroll or position.

ClientHeight: height of elements including padding but excluding border, horizontal scroll bar, and margin. For inline elements this property is always 0, in px, for read-only elements.

OffsetHeight: includes the padding, border, and horizontal scroll bar, but does not include the height of the margin element. For inline elements this property is always 0, in px, for read-only elements.

Let’s discuss what happens when there is a scrollbar:

If the element’s children are higher than the element’s and overflow=scroll, the element will scroll, scrollHeight: Because the child element is taller than the parent element, the parent element does not want to be as tall as the quilt element, so the scrollbar is displayed. Part of the element is hidden during scrolling. ScrollHeight represents the height of the element including the currently invisible part. And the height of the visible part is actually clientHeight, which is scrollHeight>=clientHeight. It only makes sense to talk about scrollHeight when there is a scrollbar, and scrollHeight==clientHeight is constant when there is no scrollbar. Unit: px, read-only element.

ScrollTop: Represents the distance that the scrollbar will scroll down when there is a scrollTop, that is, the height of the top part of the element that is covered. ScrollTop ==0 is always true without the scrollbar. The unit is px, readable and configurable.

OffsetTop: The distance between the top of the current element and the top of the nearest parent element, regardless of whether there is a scroll bar. Unit: px, read-only element.

OffsetTop: The distance between the top of the current element and the top of the nearest parent element, regardless of whether there is a scroll bar. Unit: px, read-only element.