Chrome 和 Firefox 中不同的 position.y答案

【问题标题】：Different position.y in Chrome and FirefoxChrome 和 Firefox 中不同的 position.y
【发布时间】：2018-08-24 14:52:08
【问题描述】：

我有一个导航栏，它在滚动时会粘在顶部。我有一个代码可以在滚动后获取导航栏的位置。在 Chrome 中，我得到 position.x = 0，并且 position.y = 0 正如预期的那样，因为导航栏就在网站的顶部。但是....如果我在 Firefox 中运行相同的代码，我会得到 position.x = 0 和 position.y = -775 尽管导航栏粘在顶部。有人知道吗？

代码如下：

function getPosition(el) {
    var xPos = 0;
    var yPos = 0;

    while (el) {
      if (el.tagName == "BODY") {

        var xScroll = el.scrollLeft || document.documentElement.scrollLeft;
        var yScroll = el.scrollTop || document.documentElement.scrollTop;

        xPos += (el.offsetLeft - xScroll + el.clientLeft);
        yPos += (el.offsetTop - yScroll + el.clientTop);
      } else {

        xPos += (el.offsetLeft - el.scrollLeft + el.clientLeft);
        yPos += (el.offsetTop - el.scrollTop + el.clientTop);
      }

      el = el.offsetParent;
    }
    return {
      x: xPos,
      y: yPos
    };
  }

  window.addEventListener("scroll", updatePosition, false);
  window.addEventListener("resize", updatePosition, false);

  function updatePosition() {
    position = getPosition(myElement);
  } 

var myElement = document.querySelector("#site-navigation"); 
var position = getPosition(myElement);
alert("The image is located at: " + position.x + ", " + position.y);

【问题讨论】：

能否提供#site-navigation的CSS和/或任何其他相关的CSS

标签： javascript jquery google-chrome firefox position

【解决方案1】：

从我的角度来看，代码工作得很好。这是我创建的测试用例： https://codebrace.com/editor/afe98451c

【讨论】：

我知道代码可以正常工作，但是...因为 Firefox 和 chrome 为 offset() 提供了不同的值，这就是为什么不能在不同的浏览器中同时触发搜索栏的原因。
我已经在 chrome 和 firefox 中进行了测试。您的代码按预期工作。
一般是跨浏览器差异造成的。这是由于这些浏览器中位置和元素大小的差异造成的，差异也是如此。
通常顶部位置不同，底部位置相同。

【解决方案2】：

已解决：

function getPosition(element) {
    console.log('getPosition');
    var xPos = (element.offsetLeft - element.scrollLeft + element.clientLeft);
    var yPos = (element.offsetTop - element.scrollTop + element.clientTop);

    return {
        x: xPos,
        y: yPos
    };
}

我删除了 while 循环，因为我不需要 if 语句，也删除了 el=el.offsetParent;，因为它改变了值。现在我在每个浏览器中都得到了相同的值。呜呜呜 :)

【讨论】：