HTML テーブルで現在表示されている上部行と下部行を決定する JS/VueJS 実装

Question

thead と tbody を含む標準 HTML テーブルがあります。tbody の行数は配列のサイズに依存するため、任意の数にすることができます。

テーブルにはスクロールできる最大の高さがあります。テーブルがスクロールするときに、新しく表示された上部と下部の行を計算できるようにしたいと考えています。

また、これを実現するために jquery を使用することはできません。JavaScript を使用したいだけです。

この質問に対する受け入れられた回答を試してみましたが、不正確なようで、行 2 ～ 7 の数が間違ってカウントされることがあります...HTML テーブルの最上位行の決定

Answer 1

IntersectionObserver API を使用して、親テーブルにどの行が表示されているかを確認できます。各行に交差オブザーバーを追加し、isIntersecting を使用して行が表示されているかどうかを確認します。

リーリー

最初と最後の表示行をカウントするには、可視性が変更されたときに各行を「visibleElements」配列に追加または削除するか、「visible」クラスを切り替えることができます。