The difference between scrollwidth,clientwidth,offsetwidth

ScrollWidth: The width of the actual content of the object, without the edge width, becomes larger when the content in the object exceeds the visible area.
ClientWidth: The width of the visible area of the object content, the edges such as the scroll bar, and so on, will change with the size of the object display.
Offsetwidth: The actual width of the object as a whole, and the edges of the package scroll bar, will change as the object's display size changes.

Scenario 1:

No content within the element or content does not exceed the viewable area, scrolling does not appear or is not available.

Scrollwidth=clientwidth, both are the width of the content visibility area.

The offsetwidth is the actual width of the element.

Scenario 2:

The content of the element exceeds the visible area, and the scroll bar appears and is available.

Scrollwidth>clientwidth.

The scrollwidth is the width of the actual content.

ClientWidth is the width of the content visibility area.

Offsetwidth is the actual width of the element.

Technical Exchange QQ Group: 15129679

The difference between scrollwidth,clientwidth,offsetwidth