Почему window.scrollY + element.getBoundingClientRect(). Top не равно element.offsetTop?

Question

Я ожидал element.getBoundingClientRect(), window.scrollY и element.offsetTop для работы, как показано на рисунке ниже. Но, как вы можете видеть, цифры не складываются (в моем случае pos.offsetTop - (el.getBoundingClientRect().top + window.scrollY) всегда == -14).

Что я делаю неправильно?

Answer 1

Это может быть связано со структурой страницы. Если вы посмотрите на следующий пример, вы увидите, что offsetTop внутреннего div все равно 51, даже если он находится на расстоянии более 150 пикселей от верхней части страницы.

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 является объектом таблицы, а расстояние от верхней части 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)