前言

? 最近做項目時遇到監聽html滾動相關的功能，涉及到offsettop屬性，以前認為參考點就是相對body，結果發現項目中非首屏的元素得到的offsettop居然是0，后來才知道原來有個offsetparent屬性，是以這個來定位的，這次也將相關屬性一并介紹一下。

offsetParent定位父級

? 偏移量屬性一般就是offsetLeft、offsetTop、offsetHeight、offsetWidth這四種了，然后還有一個offsetParent屬性作為偏移的參照點。在網上看到的offsetParent的定義是：與當前元素最近的經過定位(position不等于static)的父級元素（感覺和絕對定位的定位點很類似？）。然后具體情況分為下面幾種：

1. position為fixed時，offsetParent為null，offsettop的值和top相等。此時元素是以視口來定位的。

2. position非fixed，父級元素無定位（static）時，offsetParent為body。

3. position非fixed，父級元素有定位時，offsetParent為最近的有定位的父級元素。

4. body元素，offsetParent為null，offsettop為0（似乎是廢話）。

偏移量屬性

offsetLeft：元素相對于定位父級左內框的距離; offsetTop: 元素相對于定位父級頂部內框的距離。

offsetWidth: 元素在水平方向上占用的空間大小，無單位(以像素px計); offsetHeight: 表示元素在垂直方向上占用的空間大小，無單位(以像素px計)。包括滾動條的寬度。

tips：偏移量屬性都是只讀的

其他類似屬性

scrollHeight和scrollWidth，可滾動的絕對寬高，包括隱藏不可見的部分（offset僅是相對于元素的width和height不包括隱藏部分）。

scrollTop和scrollLeft: 可滑動的元素（即元素出現滾動條的情況時）內部在xy軸上滑動的距離，可為其賦值。

clientHeight和clientWidth：可視區域的寬高（不同瀏覽器中clientHeight和offsetWidth有區別）。

基本上就是這些了，后面再想到其他的或細節的部分再進行補充。