javascript - 当 body 可以相对定位时，如何计算 dom 元素的页面位置？

Question

当我将 body 设置为具有 39 像素边距的相对定位元素(我正在为页面顶部的工具栏腾出空间)时，我有一个奇怪的错误开始出现。

无论如何 - 如果您查看大多数网站如何告诉您计算页面元素位置，您会看到如下代码:

function getPos(elt) {
    var pt = [0, 0];

    while (elt.offsetParent !== null) {
        pt[0] += elt.offsetLeft;
        pt[1] += elt.offsetTop;
        elt = elt.offsetParent;
    }
    return pt;
}

即使您的 标记有边距，这也能正常工作。但是，如果您的 body 也是 position:relative，那么这将返回一个太小的值 - 它不包括 body 元素的边距。

我如何 1) 检测 body 是否相对定位，以及 2) 找到我们的边距，以便我可以将它们添加回去？

请注意，我需要页面坐标，以便将它们与 MouseEvent PageX、PageY 进行比较。

Answer 1

如果你限制自己只在“现代”浏览器中工作，就像 zepto.js 实现一样，你可以获得一个更小的 .offset() 函数实现:

offset: function(){
      var obj = this[0].getBoundingClientRect();
      return {
        left: obj.left + document.body.scrollLeft,
        top: obj.top + document.body.scrollTop,
        width: obj.width,
        height: obj.height
      };
    }

https://github.com/madrobby/zepto/blob/master/src/zepto.js

如果 getBoundingClientRect 可用，这或多或少是 jQuery 所做的。