轉載自這個老哥
https://www.cnblogs.com/lufy/p/6704945.html?utm_source=itdadao&utm_medium=referral
getBoundingClientRect()

這個方法返回一個矩形對象，包含四個屬性：left、top、right和bottom。分別表示元素各邊與頁面上邊和左邊的距離。

var box=document.getElementById(‘box’); // 獲取元素

alert(box.getBoundingClientRect().top); // 元素上邊距離頁面上邊的距離

alert(box.getBoundingClientRect().right); // 元素右邊距離頁面左邊的距離

alert(box.getBoundingClientRect().bottom); // 元素下邊距離頁面上邊的距離

alert(box.getBoundingClientRect().left); // 元素左邊距離頁面左邊的距離

注意：IE、Firefox3+、Opera9.5、Chrome、Safari支持，在IE中，默認坐標從(2,2)開始計算，導致最終距離比其他瀏覽器多出兩個像素，我們需要做個兼容。

總結

以上是生活随笔為你收集整理的如何获取元素与当前可视区域顶部的距离的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。