DOM要素の位置オフセットを正しく取得するにはどうすればよいですか？

Question

element.getBoundingClientRect（）を使用して要素のオフセットを指差ししようとしていますが、この問題は、Webページの高さが長く、スクロールしている場合に関数がウィンドウの要素のオフセットを返す場合です。ページの上部にあるオフセットを取得するにはどうすればよいですか？

Answer 1

documentation for getBoundingClientRect()は、簡単な例では、あなたのユースケースを取り上げます。

外接する四角形を計算するときに、ビューポートエリア（またはその他のスクロール可能な要素）の行われているスクロール量が考慮されます。これは、スクロール位置が変更されるたびに（その値はビューポートに関連し、絶対値ではないため）矩形の境界線のエッジ（上、左、下、右）が変更されることを意味します。 ドキュメントの左上隅を基準にして境界矩形が必要な場合は、現在のスクロール位置を上部および左プロパティに追加します（これらはwindow.scrollXおよびwindow.scrollYを使用して取得できます）。現在のスクロール位置。