115

私たちのアプリケーションは、無限スクロールを使用して、異種アイテムの大きなリストをナビゲートします。いくつかのしわがあります:

  • ユーザーが 10,000 項目のリストを持っていて、3k 以上スクロールする必要があるのはよくあることです。
  • これらはリッチ アイテムであるため、ブラウザーのパフォーマンスが許容範囲を超える前に、DOM に数百しか保持できません。
  • アイテムの高さはさまざまです。
  • アイテムには画像が含まれている場合があり、ユーザーは特定の日付にジャンプできます。これは注意が必要です。なぜなら、ビューポートの上に画像をロードする必要があるリスト内のポイントにユーザーがジャンプできるためです。これにより、ロード時にコンテンツが押し下げられます。これを処理しないと、ユーザーは日付にジャンプする可能性がありますが、その後、以前の日付にシフトされます。

既知の不完全な解決策:

  • ( react-infinite-scroll ) - これは単純な「一番下に到達するとさらにロードする」コンポーネントです。DOM をカリングしないため、何千ものアイテムで停止します。

  • ( Scroll Position with React ) - 上部に挿入するとき、または下部に挿入するときにスクロール位置を保存および復元する方法を示しますが、両方を同時にではありません。

私は完全な解決策のコードを探しているわけではありません (それは素晴らしいことですが) 代わりに、この状況をモデル化するための「React の方法」を探しています。スクロール位置状態か?リスト内での位置を維持するには、どの州を追跡する必要がありますか? レンダリングされたものの下部または上部近くをスクロールしたときに新しいレンダリングをトリガーするには、どの状態を維持する必要がありますか?

4

3 に答える 3