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>