Offset series

The offset properties are read-only

OffsetHeight and offsetWidth

Returns the pixel height/width (integer) of the element, including the padding, border, and scrollbar of the element.

The offsetLeft and offsetTop

Returns the pixel value of the current element’s border relative to the left/upper inner margin of its offsetParent element.

OffsetParent is the nearest parent element that has a position (position is not static). If neither parent element has a position, the body element will always be found.

The client series

ClientHeight and clientWidth

Read-only property that returns the internal height/width (integer) of the element, including the padding but excluding the boder, scrollbar, and margin.

  • ClientHight = (CSS) Height + (CSS) padding-horizontal scroll bar (if present)
  • ClientWidth = (CSS) width + (CSS) padding-vertical scrollbar (if present)

ClientLeft and clientTop

Read-only property that returns the width (integer) of the left/top border of the element

Note:

  1. If the text direction is from right to left (by setting direction: RTL; The default is left to right), and there is a vertical scrollbar (the vertical scrollbar is on the left, not the right) : ClientLeft = border width (border width) + scrollbar width (border width)
  2. ClientLeft returns 0 if the current element is inline

See this article for details on clientWidth, clientHeight, clientLeft, clientTop, and several common scenarios

Scorll series

scrollHeight

Read-only property that returns the height (integer) of the element, including the part of the view that is not visible because of a scrolling overflow

  • containspaddingAs well as::beforeand::afterPseudo elements, but not includedborderandmargin

ScrollHeight contains the height of the element in 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.

scrollTop

Gets or sets the number of pixels by which the content of an element scrolls vertically

ScrollTop represents how far the scrollbar will scroll down with a vertical scroll bar, which is the height of the part of the element that is hidden at the top. ScrollTop === 0 is always true without the scrollbar.

ScrollHeight – scrollTop === clientHeight is true to scroll the element to the end

scrollLeft

You can read or set the number of pixels an element’s content scrolls horizontally. Analogy scrollTop

ScrollX and scrollY

Returns the pixel value of horizontal/vertical scrolling of the document (page).

PageXOffset and pageYOffset are aliases of scrollX and scrollY, respectively. PageXOffset and pageYOffset are more compatible.

getBoundingClientRect()

The getBoundingClientRect() method returns the size of the element and its position relative to the viewport

Examples of usage:

Element.getBoundingClientRect().left
Copy the code

For a standard box model, the size of the element is equal to the sum of width/height + padding + border-width. If box-sizing: border-box, the element size is equal to width/height.

  • The return values are left, top, right, bottom, width, and height, all read-only in pixels. Except for width and height, all attributes are evaluated relative to the top left corner of the view window.

  • The top, left, right, and bottom attributes change as you scroll through the viewport area, and they can be negative. If you need to get the top and left attributes relative to the top left corner of the page, just add the current scroll position to the top and left attributes (via window.scrollX and window.scrolly), as shown below:

Mouse-related properties

Offset, client, scroll are all HTMLElement attributes, but we often see clientX, clientY, pageX, pageY, screenX, screenY API, etc. They belong to the MouseEvent property, which is briefly mentioned here.

ClientX and clientY

Read-only property that returns the horizontal/vertical coordinates of the contact from the browser window. It doesn’t matter if the page scrolls

PageX and pageY

Read-only property that returns the horizontal/vertical coordinates of the contact relative to the entire HTML document. When there is a scroll offset from the page, this value contains the scroll offset.

ScreenX and screenY

Read-only property that returns the horizontal/vertical coordinates of the contact on the computer screen.

OffsetX and offsetY

Read-only property that returns the horizontal/vertical distance of the touch relative to the padding of the object that triggered the event

This is an experimental feature and is not recommended

reference

  1. Make clear clientHeight, offsetHeight, scrollHeight, offsetTop, scrollTop