之前做超長列表優化、滾動監聽、曝光打點時獲取元素相對於視口的位置，用到getBoundingClientRect，今天做定位導航再次用到，記錄一下
1、概念
Element.getBoundingClientRect() 方法返回元素的大小及其相對於視口的位置。
2、語法
返回值是一個 DOMRect 對象，這個對象是由該元素的 getClientRects() 方法返回的一組矩形的集合，就是該元素的 CSS 邊框大小。返回的結果是包含完整元素的最小矩形，並且擁有left, top, right, bottom, x, y, width, 和 height這幾個以像素爲單位的只讀屬性用於描述整個邊框。除了width 和 height 以外的屬性是相對於視圖窗口的左上角來計算的。
rectObject = object.getBoundingClientRect();
例如:
rectObject = document.getElementById("eg").getBoundingClientRect();
rectObject.top; //元素頂部到視窗頂部的距離
rectObject.right; //元素右邊到視窗左邊的距離
rectObject.bottom; //元素底部到視窗頂部的距離
rectObject.left; //元素左邊到視窗左邊的距離
rectObject.width; //元素的寬度
rectObject.height; //元素的高度
當計算邊界矩形時，會考慮視口區域（或其他可滾動元素）內的滾動操作，也就是說，當滾動位置發生了改變，top和left屬性值就會隨之立即發生變化（因此，它們的值是相對於視口的，而不是絕對的）。
3、兼容性（儘量僅使用 left, top, right, 和 bottom.屬性是最安全的）
![]()
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------參考鏈接
MDN鏈接：https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect