The difference between scrollwidth,clientwidth,offsetwidth

Source: Internet
Author: User

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.


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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.