Pourquoi window.scrollY + element.getBoundingClientRect(). Top n'est pas égal à element.offsetTop?

Question

Je m'attendais à element.getBoundingClientRect(), window.scrollY et element.offsetTop de travailler comme indiqué sur l'image ci-dessous. Mais comme vous pouvez le voir, les chiffres ne s'additionnent pas (dans mon cas, pos.offsetTop - (el.getBoundingClientRect().top + window.scrollY) toujours == -14).

Qu'est-ce que je fais mal?

Answer 1

Cela peut être dû à la structure de votre page. Si vous regardez l'exemple suivant, vous verrez que l'offsetTop de la div interne est toujours 51 même si elle est plus de 150px loin du haut de la page.

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>

Cela est dû au fait que l'élément parent de la div est l'objet de la table et la distance entre le haut de la div à son parent est 51px.

Jetez un oeil à cette page pour un peu plus en profondeur à parler de offsetTop (https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop)

Et cette page pour la offsetParent (https://developer.mozilla.org/en-US/docs/Web/API/HTMLelement/offsetParent)