DifferencesAmongOffsetClientAndScroll

Offset offset

1. OffsetHeight: the amount of space occupied by an element in the vertical direction, in pixels.

cludes the height of the element, the height of the (visible) horizontal scroll bar, the height of the upper border, and the height of the lower border.

2. offsetWidth: The amount of space the element occupies horizontally, in pixels. Includes the width of the element, the width of the (visible) vertical scroll bar, the left border width, and the right border width.
3. OffsetLeft: the pixel distance from the left outer border of the element to the left inner border of the containing element.
4. OffsetTop: the pixel distance between the upper outer border of an element and the upper inner border of the containing element.

Client

1. ClientWidth: the width of the element content area plus the width of the left and right margin.
2. ClientHeight: the height of the element content area plus the height of the upper and lower inner margins.

Scroll

1. ScrollHeight: the total height of the content of the element without a scroll bar.
2. ScrollWidth: the total width of the content of the element without a scroll bar.
3. ScrollLeft: the number of pixels hidden on the left side of the content area. You can change the scrolling position of the element by setting this property.
4. ScrollTop: the number of pixels hidden above the content area. You can change the scrolling position of the element by setting this property.