javascript - 为什么 window.scrollY + element.getBoundingClientRect().top 不等于 element.offsetTop？

Question

我预计 element.getBoundingClientRect()、window.scrollY 和 element.offsetTop 的工作方式如下图所示。但正如您所看到的，这些数字并没有相加(在我的例子中，pos.offsetTop - (el.getBoundingClientRect().top + window.scrollY)始终== -14)。

我做错了什么？

Answer 1

这可能是由于您的页面结构造成的。如果你看下面的例子，你会发现内部div的offsetTop仍然是51，尽管它距离页面顶部超过150px。

var element = document.getElementById("id");
console.log(element.offsetTop)

<table style="margin-top: 100px;">
  <tr>
    <td>
      <div style="margin-top: 50px;background-color:blue; height:100px;">

        <div id="id" style="background-color: red; width: 20px; height:20px;">
        </div>
      </div>
    </td>
  </tr>
</table>

这是因为div的父元素是table对象，并且div顶部到其父元素的距离是51px。

查看此页面，了解有关 offsetTop ( https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop ) 的更深入讨论

此页面为 offsetParent ( https://developer.mozilla.org/en-US/docs/Web/API/HTMLelement/offsetParent )