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