scrollTop：滑動多少的距離
#outer
#inner#outer
height: 500px
border: 1px solid #000
overflow-y: scroll
#inner
height: 800px
background: teal上述範例在滑動到最底時，外層的#outer一共是滑動了300px，因為#outer高度只有500px，但內層的#innter卻有800px，外層不夠的300px就會變成滑動的距離。當滑到最底部時，一共滑了300px
網頁整體的拉霸
若想取得現在整體網頁拉霸滑動到哪裡的位置，可以用以下JS
document.documentElement.scrollTop如果用了document.body.scrollTop不論滑動到哪裡都會回傳0，所以必須用documentElement（實測Chrome/IE/FireFox/Safari）
offsetTop：本體相對於offsetParent的距離
offsetTop的指涉的概念大概就像上圖這樣offsetParent所在的位置可以透過targetElement.offsetParent來查詢
offsetParent就是擁有position: relative定位的母層元素
如果我把上圖中的<article>的相對定位屬性移除，offsetParent會再找到更上面擁有相對定位的母層
如果把上面所有相對定位都掃掉，offsetParent就會回傳<body>
※例外：當目標元素為position: fixed時，由於他是相對於視窗做定位，不存在什麼絕對母層，所以他的offsetParent會回傳null
padding / border 會不會影響到offsetTop呢？
由於padding / border 都是屬於上圖咖啡色方塊的目標元素之中
所以他們不會影響到offsetTop
clientTop：簡單來說就是border-top
但其實clientTop指涉的不是border-top，他是指元素外層與內層之間的距離。
如果把OS設定為阿拉伯文 / 希伯來文這種拉霸在左邊的語言，就可以看出端倪
這時的clientLeft會加上拉霸的15px，所以總和值為50px+15px=65px
參考資料
要素サイズとスクローリング