快捷導(dǎo)航

js獲取元素到可視區(qū)的距離、瀏覽器窗口滾動距離及元素距離瀏覽器頂部距離

更新時間：2023年11月16日 15:01:29 作者：godlike-icy

這篇文章主要給大家介紹了關(guān)于js獲取元素到可視區(qū)的距離、瀏覽器窗口滾動距離及元素距離瀏覽器頂部距離的相關(guān)資料,文中通過代碼介紹的非常詳細,對大家的學(xué)習或者工作具有一定的參考借鑒價值,需要的朋友可以參考下

1. js獲取元素距離可視區(qū)的各種距離

const box=document.getElementById('box') // 獲取元素
const ct = box.getBoundingClientRect().top // 元素上邊距離頁面可視區(qū)上邊的距離
const cr = box.getBoundingClientRect().right // 元素右邊距離頁面可視區(qū)左邊的距離
const cb = box.getBoundingClientRect().bottom // 元素下邊距離頁面可視區(qū)上邊的距離
const cl = box.getBoundingClientRect().left // 元素左邊距離頁面可視區(qū)左邊的距離

2. js獲取瀏覽器窗口滾動距離

// 瀏覽器滾動距離
const dt = document.documentElement.scrollTop || document.body.scrollTop;

3. js獲取元素實際距離頁面距離（包括滾動距離）

（1）.如果父輩元素中有定位的元素，那么就返回距離當前元素最近的定位元素邊緣的距離。

（2）.如果父輩元素中沒有定位元素，那么就返回相對于body邊緣距離。

有些限制，對于滾動父元素設(shè)置為scroll：hidden時不生效。

 const box = document.getElementById('box')
 // 元素實際距離頁面頂部距離
 const bt = box.offsetTop;
 // 元素實際距離頁面左邊距離
 const bl = box.offsetLeft;
 // 元素實際距離頁面右邊距離
 const br = box.offsetRight;
 // 元素實際距離頁面底部距離
 const bb = box.offsetBottom;

附：獲取元素到頂部或左部的距離

document.querySelector(selectDom).offsetTop：獲取元素到頂部的距離
document.querySelector(selectDom).offsetLeft：獲取元素到左邊的距離

offsetTop：元素到offsetParent頂部的距離

offsetParent：距離元素最近的一個具有定位的祖宗元素（relative，absolute，fixed），若祖宗都不符合條件，offsetParent為body。如下圖所示：獲取child的offsetTop，圖1的offsetParent為father，圖2的offsetParent為body。