JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight、clientHeight、clientTop學習筆記
全文參考：https://github.com/iuap-design/blog/issues/38 、MDN
clientHeight，只讀
clientHeight 可以用公式 CSS height + CSS padding - 水平滾動條的高度 (如果存在) 來計算。
如圖，這樣一個div，它的clientHeight為95，計算：50(height)+30(padding-top)+30(padding-bottom)-15(經測量滾動條高度就是15)=95
clientTop，只讀
一個元素頂部邊框的寬度（以畫素表示）。嗯。。就只是 border-top-width
類似的屬性還有一個 clientLeft ，顧名思義……
offsetHeight，只讀
元素的offsetHeight是一種元素CSS高度的衡量標準，包括元素的邊框、內邊距和元素的水平滾動條（如果存在且渲染的話），是一個整數。
還是上面的圖，div的offsetHeight為112。計算：50+60(上下內邊距)+2(上下邊框)=112
offsetTop，只讀
HTMLElement.offsetParent 是一個只讀屬性，返回一個指向最近的包含該元素的定位元素。如果沒有定位的元素，則 offsetParent 為最近的 table, table cell 或根元素（標準模式下為 html；quirks 模式下為 body）。當元素的 style.display 設定為 "none" 時，offsetParent 返回 null。
它返回當前元素相對於其 offsetParent 元素的頂部的距離。
還是上面那張圖，div的offsetTop為20，因為margin-top是20，距離html頂部的距離是20...
scrollHeight，只讀
實話，這麼久了，竟然一直搞錯這個scroll相關屬性，其實它描述的是outer的屬性，而窩一直取inner的屬性值，難怪scrollTop一直是0。。。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#outer {
margin: 100px 50px;
background: url(http://images.cnblogs.com/cnblogs_com/wenruo/873448/o_esdese.jpg);
height: 100px;
width: 50px;
padding: 10px 50px;
overflow: scroll;
}
#inner {
height: 200px;
width: 50px;
background-color: #d0ffe3;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner"></div>
</div>
</body>
</html>
因為限制了父元素的高度，所以不能全部顯示子元素，設定了overflow之後，可以通過滾動條的形式滑動檢視子元素。效果如圖1，如果沒有限制父元素的高度，那麼效果將如圖2顯示。
（圖1） 
（圖2）
scrollHeight 就是圖2的高度，沒有高度限制時，能夠完全顯示子元素時的高度（clientHeight）。
所以這裡scrollHeight為220，計算：200+10+10=220
scrollTop，可寫
是這些元素中唯一一個可寫可讀的。
下面的圖是用微信截圖隨便畫的:D（不小心混入了一個游標。。
所以當滾動條在最頂端的時候， scrollTop=0 ，當滾動條在最低端的時候， scrollTop=115
這個115怎麼來的（滾動條高度是15，我量的），見下圖。（實為我主觀臆測，不保證準確性。。。_(:з」∠)_
scrollTop是一個整數。
如果一個元素不能被滾動，它的 scrollTop 將被設定為 0 。
設定scrollTop的值小於0， scrollTop 被設為 0。
如果設定了超出這個容器可滾動的值, scrollTop 會被設為最大值。
判定元素是否滾動到底：
element.scrollHeight - element.scrollTop === element.clientHeight
返回頂部
element.scrollTop = 0
一個簡單的返回頂部的時間，一個需要注意的地方是，動畫是由快到慢的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>返回頂部</title>
<style>
#outer { height: 100px; width: 100px; padding: 10px 50px; border: 1px solid; overflow: auto; }
</style>
</head>
<body>
<div id="outer">
<div id="inner"></div>
</div>
<button onclick="toTop(outer)">返回頂部</button>
<script>
function toTop(ele) {
// ele.scrollTop = 0;
let dy = ele.scrollTop / 4; // 每次更新scrollTop改變的大小
if (ele.scrollTop > 0) {
ele.scrollTop -= Math.max(dy, 10);
setTimeout(() => {
toTop(ele, dy);
}, 30);
}
}
// 初始化
window.onload = () => {
for (let i = 0; i < 233; i++) inner.innerText += `第${i}行\n`;
}
</script>
</body>
</html>