Question

我试图用纯Javascript重构我的所有jQuery，除了一个非常具体的值之外，我得到了所有工作。我在此代码的浏览器供应商中获得了不同的值：

使用jQuery我会使用：

var topSelected = figure.offset().top - $(window).scrollTop();

这是我在没有jQuery的情况下使用DOM的（非工作）尝试：

 var rect = figure.getBoundingClientRect(),
     topSelected = (rect.top + document.body.scrollTop) - window.pageYOffset;

我使用此代码获取Chrome中topSelected的完全相同的值，但不是FF。浏览器与浏览器的不同之处是document.body.scrollTop。

使用DOM API获取元素偏移量与滚动顶部之间差异的正确方法是什么？

我需要支持IE9 +，Firefox和Chrome。

Answer 1

function getPosition(element) {
  var xPosition = 0,
    yPosition = 0;

  while (element) {
    xPosition += (element.offsetLeft + element.clientLeft);
    yPosition += (element.offsetTop + element.clientTop);
    element = element.offsetParent;
  }
  return {
    x: xPosition,
    y: yPosition
  };
}

function getScroll() {
  return {
    x: document.documentElement.scrollLeft || document.body.scrollLeft,
    y: document.documentElement.scrollTop || document.body.scrollTop
  };
}

document.getElementById('test').addEventListener('click', function() {
  var pos = getPosition(this),
    scroll = getScroll(),
    diff = (pos.x - scroll.x) + ',' + (pos.y - scroll.y);

  this.childNodes[0].nodeValue = diff;
  console.log(diff);
}, false);

body {
  height: 1000px;
  width: 1000px;
  font-family: Consolas, monospace;
}
#test {
  display: inline-block;
  border: 3px solid;
  padding: 10px;
  margin-top: 300px;
  margin-left: 300px;
}

<div id='test'>Element</div>

要点：

最终的功能集可能如下所示：

function getPosition(element) {
    var xPosition = 0,
        yPosition = 0;

    while (element) {
        xPosition += (element.offsetLeft + element.clientLeft);
        yPosition += (element.offsetTop + element.clientTop);
        element = element.offsetParent;
    }
    return {
        x: xPosition,
        y: yPosition
    };
}

function getScroll() {
    return {
        x: document.documentElement.scrollLeft || document.body.scrollLeft,
        y: document.documentElement.scrollTop || document.body.scrollTop
    };
}

function getWindowOffset(element) {
    var pos = getPosition(element),
    scroll = getScroll();

    return {
            x: (pos.x - scroll.x),
            y: (pos.y - scroll.y)
    };
}

然后只需在元素上调用getWindowOffset()即可获得相对于窗口的位置。

Answer 2

我找到了解决方法：

var rect = figure.getBoundingClientRect(),
    topSelected = (rect.top + (document.documentElement.scrollTop || document.body.scrollTo)) - window.pageYOffset;

它的作用是检查document.documentElement.scrollTop的值。在Chrome中，这总是返回0.因此，如果返回0，则document.body作为元素提供给括号外的scrollTop函数。

TL; DR

正确获取偏移：
Firefox - ＆gt; document.documentElement中
Chrome - ＆gt; document.body的

如何从当前屏幕位置获取元素的偏移量？

2 个答案:

要点：