js获取元素到可视区的距离、浏览器窗口滚动距离及元素距离浏览器顶部距离

1. js获取元素距离可视区的各种距离

const box=document.getElementById('box') // 获取元素
const ct = box.getBoundingClientRect().top // 元素上边距离页面可视区上边的距离
const cr = box.getBoundingClientRect().right // 元素右边距离页面可视区左边的距离
const cb = box.getBoundingClientRect().bottom // 元素下边距离页面可视区上边的距离
const cl = box.getBoundingClientRect().left // 元素左边距离页面可视区左边的距离

2. js获取浏览器窗口滚动距离

// 浏览器滚动距离
const dt = document.documentElement.scrollTop || document.body.scrollTop;

3. js获取元素实际距离页面距离（包括滚动距离）

（1）.如果父辈元素中有定位的元素，那么就返回距离当前元素最近的定位元素边缘的距离。

（2）.如果父辈元素中没有定位元素，那么就返回相对于body边缘距离。

有些限制，对于滚动父元素设置为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。

注意：只有元素show（渲染完成）才会计算入offsetTop，若是中间有元素数据需要异步获取，会导致最终获取的offsetTop值偏小

总结 

到此这篇关于js获取元素到可视区的距离、浏览器窗口滚动距离及元素距离浏览器顶部距离的文章就介绍到这了,更多相关js获取元素到可视区的距离内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！