なぜwindow.scrollY + element.getBoundingClientRect（）。topがelement.offsetTopと等しくないのですか？

Question

私はelement.getBoundingClientRect(),window.scrollYとelement.offsetTopが下図のように動作すると予想しています。しかし、あなたが見ることができるように、数字は加算されません（私の場合、pos.offsetTop - (el.getBoundingClientRect().top + window.scrollY)は常に== -14です）。

私は間違っていますか？

Answer 1

これはあなたのページの構造に起因する可能性があります。次の例を見ると、ページの上部から150px以上離れていても、内部divのoffsetTopはまだ51であることがわかります。

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であるという事実によるものです。

いくつかのより詳細なoffsetParentのためのoffsetTop（https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop）

そしてこのページの話（https://developer.mozilla.org/en-US/docs/Web/API/HTMLelement/offsetParent）

のために、このページを見てみましょう