Top值

業務開發中常常會用到元素或者瀏覽器窗口的各類top值，最近開發組件的過程當中也遇到各類問題，所以決定好好總結一下。

---

常見的top值

scrollTop

Element.scrollTop
屬性能夠獲取或設置一個元素的內容垂直滾動的像素數。
一個元素的 scrollTop值是這個元素的頂部到它的最頂部可見內容（的頂部）的距離的度量。當一個元素的內容沒有產生垂直方向的滾動條，那麼它的 scrollTop 值爲0。

// 得到滾動的像素數
var  intElemScrollTop = someElement.scrollTop;
// 運行此代碼後， intElemScrollTop 是一個整數，即element的內容向上滾動的像素數。
// 設置滾動的距離
element.scrollTop = intValue;

scrollTop 能夠被設置爲任何整數值，同時注意：

• 若是一個元素不能被滾動（例如，它沒有溢出，或者這個元素有一個"non-scrollable"屬性）， scrollTop將被設置爲0。
• 設置scrollTop的值小於0，scrollTop 被設爲0
• 若是設置了超出這個容器可滾動的值, scrollTop 會被設爲最大值.
• window對象或包含有滾動元素的均可以使用scrollTop並設置本身想要的top值
  例子：https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollTop

獲取window對象的scrollTop存在兼容性問題。

解決方案1

if(window.pageYOffset){//這一條濾去了大部分， 只留了IE678

}else if(document.documentElement.scrollTop ){//IE678 的非quirk模式

}else if(document.body.scrolltop){//IE678 的quirk模式

}

解決方案2

scrolltop = (((t = document.documentElement) || (t = document.body.parentNode)) typeof t.scrollTop == ‘number’ ? t : document.body).scrollTop

來源》

offsetTop

HTMLElement.offsetTop 爲只讀屬性，它返回當前元素相對於其 offsetParent 元素的頂部的距離。

元素的offsetTop是相對於父級元素的，並非直接獲取到距離頁面頂部的距離,須要區分不一樣狀況!!!

offsetParent

向上尋找有定位的祖先節點，依不一樣情況會有不一樣結果：

1. 往上尋找position不爲static的第一個祖先節點。
2. 往上尋找第一個TABLE / TH / TD節點。
3. 若是沒有找到則爲BODY。
4. 若是Element自己爲fixed，則爲null。
5. 文件根節點和BODY的offsetParent爲null。

來源》

clientTop

一個元素頂部邊框的寬度（以像素表示）。不包括頂部外邊距或內邊距。clientTop 是隻讀的。

獲取元素的top-border寬度。

screenTop

screenLeft和screenTop屬性返回窗口相對於屏幕的X和Y座標。

Element.getBoundingClientRect()

經常使用於肯定元素相對於視口的位置。該方法會返回一個DOMRect對象，包含left, top, width, height, bottom, right六個屬性。

getClientRects() 返回一個TextRectangle集合，就是TextRectangleList對象。

來源》

其餘方法

elementFromPoint() 返回給定座標處所在的元素

scrollIntoView() 讓元素滾動到可視區域

大全整理