画面上部から特定の要素までの長さを特定する方法

聞きたいこと

Reactを使用して、下の画面のように緑色で囲まれた企業名が縦長に並んでいるような画面を作成しています。

下の画像のように灰色背景の上部から、企業リストの一番下に存在しているNetflixの上部までの長さ(ピクセル数等)を取得する方法を模索していますが、なかなか見つかりません。

補足

企業名はstateで管理されていて、stateを更新して企業が追加/削除等された場合、動的に長さを再度取得したい。
Codesandboxにコードを載せておきます(Codesandbox)

行動規範の内容に同意します

回答1件

Element.offsetTopで取得できます。
https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/offsetTop

ただし、offsetTopは対象要素を包含する「包含ブロック」の上辺からの距離です。
包含ブロックとは何なのかは、こちらの解説を読んでください。

https://developer.mozilla.org/ja/docs/Web/CSS/Containing_block

簡単に言うと、「対象の親要素をさかのぼっていって、一番最初にposotionがstatic以外の親要素の上辺からの距離」です。positionのデフォルトはstaticです。

codesandboxも見ました。現状ではNetflixの親要素（グレーのdiv）はpositionが無指定なのでoffsetTopで距離を測ることができません。
グレーのdivに包含ブロックを作る以外に特別な効果がないposition: relativeを指定すると、offsetTopでグレーdivの上辺からの距離を取得できます。

devToosで調べたところ

画面上での計測