ClientX, scrollX and offsetX

Each of these classes has four attributes, in clientX’s case, clientLeft, clientTop, clientWidth, and clientHeight. Next, it will first explain the meaning of each attribute with pictures and pictures, and finally distinguish them.

ClientX — Measurement of the element itself

As shown above, clientHeight/clientWidth are both padding and Content values without scroll bars. ClientTop /clientLeft represents the border-width of the top and left border of the element, respectively. ClientLeft has some special cases that include the width to the scrollBar, i.e. the text orientation is set to “right to left” and the scrollBar position is on the left.

ScrollX — Related to element scrolling

As shown in the figure above, scrollHeight contains padding and content (including content not displayed because of overflow), excluding border, margin, and scrollbar values. There is no horizontal scrolling, and the value of scrollWidth is the same as clientWidth.

ScrollHeight and scrollWidth are read-only and not assignable, but scrollTop and scrollLeft are assignable and are often used to scroll elements to a position.

The value of scrollTop is the distance from the top of the element to the top of the visible area of that element.

Note that scrollTop is the wrapper value and scrollTop for the child element is 0; And the wrapper.scrollHeight value is the same as the scrollHeight of the wrapped child element.

An element scrollTop is a measurement of the distance from the element top to its topmost visible content.

ScrollLeft exists much like scrollTop, except that when the text is “right-to-left” and the slider is on the far right, the value of scrollLeft is 0, and the left slide value becomes negative. This makes sense, because in this case, the content is sliding to the right, so the scrollLeft is negative.

OffsetX — the offset of the parent stage

The parent is the ancestor node whose nearest position property is not static.

The values for offsetWidth and offsetHeight are different from those for clientX and scrollX, and contain the border and scroll bar (if any), as well as any content not shown by scroll.

OffsetLeft refers to the distance from the top left corner of a child element to the left of its parent. That is, the border of the child to the padding of the parent. OffsetTop similarly.

The MDN explains these two attributes as follows:

offsetLeft returns the number of pixels that the upper left corner of current element is offset to the left within HTMLElement.offsetParent node.

offsetTop returns the number of pixels from the top of the closest relatively positioned parent element.

In MDN, there are also some different representations of offsetLeft under block-level elements and row-level elements, which can be viewed here.

Four, the comparison of the three

Ok, finally, we can do some comparisons. Here, we can compare whether the value is read-only, what it contains, which API it belongs to, and make a table for easy viewing.