In the development of scroll bar components, parameters such as Scroll Client offset clientX clientY are often used because dom is frequently manipulated. In order to help future readers quickly understand and summarize what they have learned, write this super detailed summary article (it may vary by browser, this article refers to modern browsers, not including IE).

Start with the introduction of offset

  • OffsetWidth refers to the width of the div (including the border of the div)

    OffsetWidth = width + padding + border + width

    Directly using the HTMLElement. The width of the offsetWidth access elements it will return after rounding value, if want to get a more accurate value, we can use the element. The getBoundingClientReact (). The width
  • OffsetHeight refers to the height of the div (including its borders)

    OffsetHeight = Height + padding + border + horizontal scroll bar Height

    Directly using the HTMLElement. OffsetHeight access elements after it returns the width of the rounded value, if want to get a more accurate value, we can use the element. The getBoundingClientReact (). The height
  • OffsetLeft is the distance between the left edge of the current element and offsetParent
  • OffsetTop is the distance of the upper boundary of the current element relative to offsetParent

Client Visual area, client

  • ClientHeight represents the height (in pixels) of the interior of the returned element, including the inner margin but excluding horizontal scroll bars, borders, and marginsClientHeight can be calculated using CSS height + CSS padding - horizontal scroller height (if present)
  • ClientWidth represents the width (in pixels) of the interior of the returned element, including the inner margin but excluding the vertical scroll bar, border, and marginClientWidth can be calculated using CSS Width + CSS PADDING - vertical scrollbar height (if present)
  • ClientTop represents the width, in pixels, of the top border of an element. Border-top height = border-top height = border-top height
  • ClientX is the distance from the mouse position to the left edge of the viewable area
  • ClientY is the distance from the mouse position to the upper edge of the viewable area

Scroll down

  • ScrollHeight Indicates the total height of the element (including the border), including the invisible part of the page that cannot be displayed due to overflow:hidden (do not mistake the scroll property for the presence of the scroll bar)

We can extend it to say that when scrollHeight-scrollTop==clientHeight the scrollbar is already at the bottom

  • ScrollWidth represents the total width of the element (including the border), including the invisible part of the page that cannot be displayed due to overflow.
  • ScrollTop sets or retrieves the pixel distance between an element and the top of its container, which you can think of as the top border of the viewable area and the invisible area (including the border) above the entire page. If there is no vertical scroll bar, then scrollTop is 0

  • ScrollLeft sets or retrieves the pixel distance between an element and the left edge of its container, which you can think of as the left border of the visible area and the invisible area (including the border) on the left side of the page.