特定のdivがビューポートにあるかどうかを調べる

私は何千もの行を持つスクロール可能なテーブルを持っています。どの行がビューポートにあるかを確認するにはどうすればよいですか？特定のdivがビューポートにあるかどうかを調べる

2017-10-22 richard nelson

がhttps://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_APIを使用してみてください最初と最後の可視行の両方が含まれます。 Polyfill（https://github.com/w3c/IntersectionObserver/tree/gh-pages/polyfill） – Krusader

行の高さは一定であるか、各行の高さは異なりますか？ –

@RomanCortes行の高さが一定である –

行の高さが一定である場合、計算が容易でなければならないが：

firstVisibleRowIndex = Math.floor(rowHeight/scroll); 
lastVisibleRowIndex = Math.ceil(rowHeight/(scroll + tableHeight));

tableHeightは、可視領域ではなく、完全なテーブルの高さでなければなりません。
すべてのサイズが同じ単位ピクセルであると仮定します。
私は数学の権利をした場合は、表示される行は

出典

2017-10-22 10:53:52

この解決策は、すべての要素を繰り返し処理して境界線を確認するのに比べて、このソリューションは本当に優れた性能を発揮することを忘れていました。これは固定高さ –

特定のdivがビューポートにあるかどうかを調べる

答えて

関連する問題