获取元素到body顶部的距离，offsetTop和offsetParent，getBoundingClientRect

最近在写一个可见曝光的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};
    //返回一个数组，方便我们使用哦。
}

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)