定位三劍客:scrollTop、offsetTop、clientTop

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

參考資料

要素サイズとスクローリング