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

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

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

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

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

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

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。