分别理解offsetWidth，clientWidth，scrollWidth和-Height

问题描述

StackOverflow有关于offsetWidth / clientWidth / scrollWidth（分别为-Height）的几个问题，但是没有提供这些值的全面解释。

There are several questions on StackOverflow regarding offsetWidth/clientWidth/scrollWidth (and -Height, respectively), but none give comprehensive explanation of what those values are.

另外网络上有几个来源可以让您发现混淆或不正确的信息。

Also, there are several sources on the web giving confusing or incorrect information.

您可以给出一个完整的解释，包括一些视觉提示？
此外，如何使用这些值来计算滚动条宽度？

Can you give a complete explanation including some visual hints?Also, how can those values be used to calculate scroll bar widths?

推荐答案

CSS框模型相当复杂，特别是涉及滚动内容时。当浏览器使用CSS中的值绘制框时，如果您只有CSS，则使用JS确定所有尺寸不是简单的。

The CSS box model is rather complicated, particularly when it comes to scrolling content. While the browser uses the values from your CSS to draw boxes, determining all the dimensions using JS is not straight-forward if you only have the CSS.

这就是为什么每个元素有六个DOM属性为您提供方便： offsetWidth ， offsetHeight ， clientWidth ， clientHeight ， scrollWidth 和 scrollHeight 。这些是表示当前视觉布局的只读属性，并且它们都是整数（因此可能受到舍入误差的限制）。

That's why each element has six DOM properties for your convenience: offsetWidth, offsetHeight, clientWidth, clientHeight, scrollWidth and scrollHeight. These are read-only attributes representing the current visual layout, and all of them are integers (thus possibly subject to rounding errors).

让我们详细了解他们：

• offsetWidth ， offsetHeight ：包含所有边框的视觉盒的大小。可以通过添加 width / height 和paddings和边框来计算，如果元素具有显示：block


• clientWidth ， clientHeight 盒子内容的可视部分，不包括边框或滚动条，但包括填充。不能直接从CSS计算，取决于系统的滚动条大小。


• scrollWidth ， scrollHeight ：所有框的内容的大小，包括当前隐藏在滚动区域之外的部分。不能直接从CSS计算，取决于内容。

• offsetWidth, offsetHeight: The size of the visual box incuding all borders. Can be calculated by adding width/height and paddings and borders, if the element has display: block
• clientWidth, clientHeight: The visual portion of the box content, not including borders or scroll bars , but includes padding . Can not be calculated directly from CSS, depends on the system's scroll bar size.
• scrollWidth, scrollHeight: The size of all of the box's content, including the parts that are currently hidden outside the scrolling area. Can not be calculated directly from CSS, depends on the content.

由于 clientWidth 将滚动条的宽度考虑在内，我们可以使用它通过公式计算滚动条宽度

Since clientWidth takes the scroll bar width into account, we can use it to calculate the scroll bar width via the formula

scrollbarWidth = offsetWidth - clientWidth - getComputedStyle().borderLeftWidth - getComputedStyle().borderRightWidth

不幸的是，我们可能会收到四舍五入的错误，因为 offsetWidth 和 clientWidth 总是整数，而实际大小可能是小于1的缩放比例。

Unfortunately, we may get rounding errors, since offsetWidth and clientWidth are always integers, while the actual sizes may be fractional with zoom levels other than 1.

请注意，这个

scrollbarWidth = getComputedStyle().width + getComputedStyle().paddingLeft + getComputedStyle().paddingRight - clientWidth

不在Chrome中可靠工作，因为Chrome返回 width 滚动条已经被减除。 （此外，Chrome会将paddingBottom放置在滚动内容的底部，而其他浏览器则不会）。

does not work reliably in Chrome, since Chrome returns width with scrollbar already substracted. (Also, Chrome renders paddingBottom to the bottom of the scroll content, while other browsers don't)

这篇关于分别理解offsetWidth，clientWidth，scrollWidth和-Height的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！