最近在做元件的過程中遇到滾動在切換過程中沒有恢複到頂部，于是發現這幾個容易混淆的屬性。
每個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