1

Cordovaアプリで JS を使用して構築された仮想スクロール リストがあり、各スクロール後にビューポートの上部にあった正確なノードを保存したいと考えています。仮想スクロールの複雑な点はscrollTop、ノードがリストの上部と下部から削除され、スクロール位置が変わるため、使用が信頼できないことです。Javascriptでこれを行うための信頼できるパフォーマンスの高い方法はありますか? ユースケースは次のとおりです。ユーザーがアプリを閉じて再度開いたときに、ユーザーを同じスクロール位置に配置し、その位置にある要素が、ユーザーがアプリを閉じる直前に最後に見た要素であることを確認したいと考えています。私はこの戦略を検討しています:

  • 次のように、各スクロールのリストの一番上にある要素を取得します。
scrollableList.addEventListener('scroll', e => {
  const topMostElement = document.elementFromPoint(150, 150); // <-- 150px due to some positioning in the app
});
  • その要素の識別子を保存して、アプリの初期化時にリストをプリロードして、要素が常にその位置にレンダリングされるようにする

JS ベースの仮想スクローラーでこの問題に対処するための他の戦略があるかどうかを知りたいです。Javascript で仮想スクローラーを構築するためのチュートリアルを見たことがありますが、この問題を回避する方法に関する実装の詳細を提供するチュートリアルは見たことがありません。前もって感謝します!

更新 1

仮想スクロール リストには多数のノードがあり、それぞれに独自の子ノードがあり、100 を超えることもあります。これにより独自の問題が発生するため、メイン スレッドのブロックを回避するために、ノードのリストを反復処理したり、各ノードで高価な操作を実行したりする必要がないソリューションが (可能な場合) 重要です。

4

2 に答える 2