區別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