获取元素在文档流中的位置

发表于 更新于 分类于 Disqus：

元素在文档流中的位置应与页面滚动量无关，指的是该元素左上角（包括border，但不包括margin）距离整个页面左上角的水平和垂直位置。

获取此位置有两种方法，观察 jQuery 2.2 源码：

1
2
3
4
5
6
var rect = elem.getBoundingClientRect();
var win = elem.ownerDocument.defaultView;
return {
    top: rect.top + win.pageYOffset,
    left: rect.left + win.pageXOffset
};

getBoundingClientRect 是一个十分高效的方法，用来获取元素相对于可见的视口的位置，而这个位置是与滚动量有关的，只有这个位置加上滚动量，即是与文档左上角的距离。

如果 getBoundingClientRect 不存在，我们依然可以通过遍历计算出结果。首先需要了解 DOM 元素的几个属性：

  1. offsetParent 向上祖先中第一个定位元素；
  2. offsetLeft 距离 offsetParent 左边界的水平位置，与滚动量无关
  3. offsetTop 距离 offsetParent 上边界的垂直位置，与滚动量无关
  4. clientLeft 一般为左边框宽度
  5. clientTop 一般为上边框宽度
  6. scrollLeft 水平滚动距离
  7. scrollTop 垂直滚动距离

因为我们要得到的距离是当时的绝对距离，与该元素的各个祖先元素的滚动量是有关的，因此我们不能简单地通过加和 offsetLeft 与 offsetTop 来得到最后的值，必须减去每一级祖先的滚动量。

具体逻辑大概就是，向该元素的上面遍历，减去每个元素的滚动量，一旦遇到是 offsetParent，则加上 offsetLeft 与 offsetTop。具体可参考 jQuery 1.4.4 源码。简单来讲就是：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function offset(ele) {
    var top = ele.offsetTop;
    var left = ele.offsetLeft;

    var offsetParent = ele.offsetParent;

    while((ele = ele.parentNode) && ele !== document) {
        left -= (ele.scrollLeft);
        top -= (ele.scrollTop);
        if (offsetParent === ele) {
            top += ele.offsetTop + ele.clientTop;
            left += ele.offsetLeft + ele.clientLeft;
            offsetParent = offsetParent.offsetParent;
        }
    }

    return {top,left};
}

当然 clientTop 与 clientLeft 并非永远代表的是上边框和左边框的宽度。