[解決済み] getBoundingClientRect().topとoffsetTopの違い？

質問

getBoundingClientRect().topとoffsetTopの違いは何ですか？

https://codepen.io/anon/pen/bWZWQg

const elem = document.querySelector('#find');

console.log('getBoundingClientRect: ' + elem.getBoundingClientRect().top);

console.log('offsetTop: ' + elem.offsetTop);

// Stuff to push the div down the page
<div id='find'>Find me</div>

私の簡単なテストでは、返される小数点以下の桁数が違うだけのようです。

どのように解決するのですか？

getBoundingClientRect はクライアントビューポートからの相対的なオフセットを与えますが offsetTop は常に固定の静的プロパティです。ただし、ドキュメント上で要素の実際の位置が変わると変化します。実際の説明は、penをご覧ください。

要素が相対コンテナ内にある場合 offsetTop は、指定されたコンテナに対する相対パスとなります。 ペン

console.log('offsetTop: ' + elem.offsetTop); //This is fixed. it get's calculated from beginning of your page to actual element's position.

console.log('getBoundingClientRect: ' + elem.getBoundingClientRect().top); // this will changing while scroll, because it's relative to your current view port.

ペンを見て、div をスクロールし、その間にコンソールをチェックしてください。

要素のコンテナが相対的である場合

console.log('offsetTop: ' + elem.offsetTop) // //This is fixed. it get's calculated from beginning of your top most relative container.