获取元素到body顶部的距离，offsetTop和offsetParent，getBoundingClientRect
forteenBrother
于 2022-03-09 14:22:57 发布
71
收藏
分类专栏： 前端 文章标签： javascript
版权
前端
专栏收录该内容
28 篇文章0 订阅
订阅专栏
最近在写一个可见曝光的sdk，是当元素显示在可见区域的时候才算作曝光，并上报给服务端。思路是在元素请求回来并渲染完成之后，计算元素距离document顶部的距离offset，当页面滚动的时候，计算offset与可视区域的差值来计算。
使用offset获取元素到顶部的距离的时候，可以发现，当元素的父级元素有relative定位的时候，offsetToTop的距离是到有定位的父元素的距离。这样如果再使用这个方法的时候，就需要层层循环、判断、累加，导致计算量过大，还很容易导致计算不准确。
下面这段是大多数文章中计算的方法
function offSet(curEle) {
var totalLeft = null;
var totalTop = null;
var par = curEle.offsetParent;
//首先把自己本身的相加
totalLeft += curEle.offsetLeft;
totalTop += curEle.offsetTop;
//现在开始一级一级往上查找，只要没有遇到body，我们就把父级参照物的边框和偏移相加
while (par){
if (navigator.userAgent.indexOf("MSIE 8.0") === -1){
//不是IE8我们才进行累加父级参照物的边框
totalTop += par.clientTop;
totalLeft += par.clientLeft;
}
//把父级参照物的偏移相加
totalTop += par.offsetTop;
totalLeft += par.offsetLeft;
par = par.offsetParent;
}
return {left: totalLeft,top: totalTop};
//返回一个数组，方便我们使用哦。
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
MDN对offsetTop的解释
HTMLElement.offsetTop
HTMLElement.offsetTop 为只读属性，它返回当前元素相对于其 offsetParent 元素的顶部内边距的距离。
HTMLElement.offsetParent
HTMLElement.offsetParent 是一个只读属性，**返回一个指向最近的（指包含层级上的最近）包含该元素的定位元素或者最近的 table,td,th,body元素。当元素的 style.display 设置为 “none” 时，offsetParent 返回 null。**offsetParent 很有用，因为 offsetTop 和 offsetLeft 都是相对于其内边距边界的。
由此可见，使用offsetTop在本设计中，不太符合。
每个dom元素都有一个getBoundingClientRect的方法
Element.getBoundingClientRect()
Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。
如果是标准盒子模型，元素的尺寸等于width/height + padding + border-width的总和。如果box-sizing: border-box，元素的的尺寸等于 width/height。
当计算边界矩形时，会考虑视口区域（或其他可滚动元素）内的滚动操作，也就是说，当滚动位置发生了改变，top和left属性值就会随之立即发生变化（因此，它们的值是相对于视口的，而不是绝对的）。如果你需要获得相对于整个网页左上角定位的属性值，那么只要给top、left属性值加上当前的滚动位置（通过 window.scrollX 和 window.scrollY），这样就可以获取与当前的滚动位置无关的值。
HTMLElement.getBoundingClientRect().top + document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
1
————————————————
版权声明：本文为CSDN博主「forteenBrother」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/forteenBrother/article/details/122885905