区别clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop

最近在做组件的过程中遇到滚动在切换过程中没有恢复到顶部，于是发现这几个容易混淆的属性。
每个HTML元素都具有clientHeight offsetHeight scrollHeight offsetTop scrollTop 这5个和元素高度、滚动、位置相关的属性，单凭单词很难搞清楚分别代表什么意思之间有什么区别。

clientHeight

clientHeight：对于没有CSS或内联布局框的元素，Element.clientHeight 属性为只读且值一直为0；否则，它是元素的内部高度（以px为单位）。它包括 padding，但不包括 border，margin 和水平滚动条（如果有水平滚动条）
可以将 clientHeight 计算为：CSS height + CSS padding - height of horizontal scrollbar （如果有水平滚动条）
【CSS高度+ CSS填充-水平滚动条的高度】

var intElemClientHeight = element.clientHeight;

intElemClientHeight 是与元素的 clientHeight 相对应的整数，以px为单位。 clientHeight 属性为只读。

offsetHeight

offsetHeight：HTMLElement.offsetHeight 的属性为只读，以整数形式返回元素的高度，包括 vertical padding 和 borders【垂直内边距和边框】。
通常，offsetHeight 以px为单位的CSS高度的度量，包括 any borders, padding, 和 horizontal scrollbars【任何边框，内边距和水平滚动条（如果呈现）】。但是不包含伪元素的高度，例 ::before 和 ::after。延伸到其他线性内容以下的浮动元素将被忽略。
如果一个元素是隐藏状态，即将 style.display 设置为 none，这个时候为0。

var intElemOffsetHeight = element.offsetHeight;

scrollHeight

scrollHeight：Element.scrollHeight 只读属性是元素内容高度的度量，其中包括由于溢出而在屏幕上不可见的内容。所以 scrollHeight>=clientHeight 是一直成立的。
scrollHeight 值等于元素内容所需的最小高度，以便在不使用垂直滚动条的情况下适合视口中的所有内容。高度的测量方法与 clientHeight 相同：它包括 padding，但不包括 border，margin 和水平滚动条（如果有水平滚动条）。它还可以包括伪元素的高度，例如 :: before 或 :: after。如果元素不需要 vertical scrollbar 【垂直滚动条】就可以容纳所有内容，则其 scrollHeight==clientHeight。

var intElemScrollHeight = element.scrollHeight;

intElemScrollHeight 是一个变量，用于存储一个与元素的 scrollHeight 像素值相对应的整数。 scrollHeight 属性是只读的。

offsetTop

offsetTop：HTMLElement.offsetTop属性是只读，返回当前元素相对于最近的 offsetParent 父节点顶部的距离。和滚动条没有关系。

topPos = element.offsetTop;

Example:

var d = document.getElementById("div1");
var topPos = d.offsetTop;
 
if (topPos > 10) {
  // object is offset more
  // than 10 pixels from its parent
}

scrollTop

scrollTop：Element.scrollTop 属性获取或设置元素内容垂直滚动的px。
有滚动条的时候，scrollTop 值是从元素顶部到其最顶部可见内容的距离的度量。当元素的内容没有垂直滚动条时，则scrollTop=0。

---

官方文档链接：
clientHeight
offsetHeight
scrollHeight
offsetTop
scrollTop