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）.如果父輩元素中有定位的元素，那么就返回距離當(dāng)前元素最近的定位元素邊緣的距離。
（2）.如果父輩元素中沒有定位元素，那么就返回相對于body邊緣距離。文章來源：http://www.zghlxwxcb.cn/news/detail-656828.html
有些限制，對于滾動父元素設(shè)置為scroll：hidden時不生效。文章來源地址http://www.zghlxwxcb.cn/news/detail-656828.html
const box = document.getElementById('box')
// 元素實際距離頁面頂部距離
const bt = box.offsetTop;
// 元素實際距離頁面左邊距離
const bl = box.offsetLeft;
// 元素實際距離頁面右邊距離
const br = box.offsetRight;
// 元素實際距離頁面底部距離
const bb = box.offsetBottom;
到了這里，關(guān)于js獲取元素到可視區(qū)的距離/瀏覽器窗口滾動距離/元素距離瀏覽器頂部距離的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
