DOM中元素的offsetHeight和scrollHeight有什么区别？

Question

在DOM中，元素的offsetHeight和scrollHeight之间有什么区别？解释中的图像将是一个很大的帮助。

Answer 1

HTMLElement.offsetHeight是一个测量，它包括元素边框，元素垂直填充，元素水平滚动条（如果存在，如果渲染）和元素CSS高度。 HTMLElement.scrollHeight衡量元素内容的高度，包括因溢出而在屏幕上看不到的内容。 HTMLElement.scrollHeight返回的值将包括padding-top和padding-bottom，但不包括元素边框或元素水平滚动条。

This页面和this页面是我的来源。

MDN文档还提供了要演示的图像。

Answer 2

正如@Csarsam所说，偏移高度是边框高度（我正在重写）。滚动高度是可滚动内容的高度，通常由多个元素组成。但滚动高度它也定义在不滚动的元素上，因此没有可滚动的内容，在这种情况下（我已经检查但我没有提及备份）滚动高度是它的内容高度，也就是说，它不包括边距和边框。但是当元素是可滚动内容的一部分时，会考虑其边距来计算其父元素的滚动高度。

滚动高度是在可滚动内容和不可滚动内容上定义的，这可能会让人感到困惑。

更新

这是一个确认我已检查过的参考：https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight