获取元素相对于文档的位置

获取元素相对于文档的当前上/左坐标

---

当需要获得元素相对于文档的顶部和左侧位置时，我们可以先通过getBoundingClientRect()确定屏幕上元素的X/Y坐标。 然后，将滚动位置和获得的屏幕坐标进行相加，如下：

function offset(el) {
    var rect = el.getBoundingClientRect(),
    scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
    scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    return { top: rect.top + scrollTop, left: rect.left + scrollLeft }
}

// example use
var div = document.querySelector('div');
var divOffset = offset(div);
console.log(divOffset.left, divOffset.top);
      

该结果等同于jQuery的$.offset()。getBoundingClientRect()是一个非常有用的跨浏览器安全的方法，该方法返回相对于视口的任何元素的顶部，右侧底部和左侧位置。