Question

我有一个导航栏，该导航栏位于滚动条的顶部。我有一个代码，可以在滚动后获取导航栏的位置。在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);

Answer 1

代码从我的工作开始就很好。这是我创建的测试用例： https://codebrace.com/editor/afe98451c

Answer 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;，因为它更改了值。现在，我在每个浏览器中都得到相同的值。呜呼:)

在Chrome和Firefox中的position.y不同

2 个答案: