分别理解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和borders来计算，如果元素有display: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.

由于offsetWidth考虑了滚动条宽度，我们可以用它通过公式计算滚动条宽度

Since offsetWidth 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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！