scrollHeight、clientHeight、offsetHeight、scrollTop等的定義以及圖解

開發中常常遇到使用scrollHeight、scrollTop、clientHeight、offsetHeight等的狀況，網上有衆多關於這些屬性的解釋，可是並不全面和直觀，如今將這些屬性結合圖例整理以下，方便往後查閱：

DOM元素對象

clientHeight	返回當前元素在頁面上的可視高度（包括padding；不包括border、margin、滾動條高度）	單位px
clientWidth	返回當前元素在頁面上的可視寬度（包括padding；不包括border、margin、滾動條寬度）	單位px
offsetHeight	返回當前元素在頁面上的可視高度（包括padding、border、滾動條高度；不包括margin）	單位px
offsetWidth	返回當前元素在頁面上的可視寬度（包括padding、border、滾動條寬度；不包括margin）	單位px
scrollHeight	返回當前整個元素的高度（包括帶滾動條的隱蔽的地方）	單位px
scrollWidth	返回當前整個元素的寬度（包括帶滾動條的隱蔽的地方）	單位px
scrollTop	clientHeight的頂部到scrollHeight頂部的高度	單位px
scrollLeft	clientWidth左邊緣到offsetWidth左邊緣的距離	單位px
offsetTop	指當前元素距離上方或上層元素的距離	單位px
offsetLeft	指當前元素距離左邊或上層元素左邊的距離	單位px

參考資料

http://www.runoob.com/jsref/dom-obj-all.html

https://www.jianshu.com/p/d267456ebc0d