私たちのアプリケーションは、無限スクロールを使用して、異種アイテムの大きなリストをナビゲートします。いくつかのしわがあります:
- ユーザーが 10,000 項目のリストを持っていて、3k 以上スクロールする必要があるのはよくあることです。
- これらはリッチ アイテムであるため、ブラウザーのパフォーマンスが許容範囲を超える前に、DOM に数百しか保持できません。
- アイテムの高さはさまざまです。
- アイテムには画像が含まれている場合があり、ユーザーは特定の日付にジャンプできます。これは注意が必要です。なぜなら、ビューポートの上に画像をロードする必要があるリスト内のポイントにユーザーがジャンプできるためです。これにより、ロード時にコンテンツが押し下げられます。これを処理しないと、ユーザーは日付にジャンプする可能性がありますが、その後、以前の日付にシフトされます。
既知の不完全な解決策:
( react-infinite-scroll ) - これは単純な「一番下に到達するとさらにロードする」コンポーネントです。DOM をカリングしないため、何千ものアイテムで停止します。
( Scroll Position with React ) - 上部に挿入するとき、または下部に挿入するときにスクロール位置を保存および復元する方法を示しますが、両方を同時にではありません。
私は完全な解決策のコードを探しているわけではありません (それは素晴らしいことですが) 代わりに、この状況をモデル化するための「React の方法」を探しています。スクロール位置状態か？リスト内での位置を維持するには、どの州を追跡する必要がありますか? レンダリングされたものの下部または上部近くをスクロールしたときに新しいレンダリングをトリガーするには、どの状態を維持する必要がありますか?