快捷導(dǎo)航

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

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

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

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

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

2. js獲取瀏覽器窗口滾動(dòng)距離

// 瀏覽器滾動(dòng)距離
const dt = document.documentElement.scrollTop || document.body.scrollTop;

3. js獲取元素實(shí)際距離頁(yè)面距離（包括滾動(dòng)距離）

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

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

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

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

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

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

offsetTop：元素到offsetParent頂部的距離

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

注意：只有元素show（渲染完成）才會(huì)計(jì)算入offsetTop，若是中間有元素?cái)?shù)據(jù)需要異步獲取，會(huì)導(dǎo)致最終獲取的offsetTop值偏小

總結(jié)

到此這篇關(guān)于js獲取元素到可視區(qū)的距離、瀏覽器窗口滾動(dòng)距離及元素距離瀏覽器頂部距離的文章就介紹到這了,更多相關(guān)js獲取元素到可視區(qū)的距離內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: