ウェブページから削除される要素を補うためにウィンドウのスクロール位置を設定しますか？

Question

私は反応スタックグリッドにレンダリングされる反応コンポーネントのコレクションを持っています。ユーザーがスクロールダウンすると、コレクションは無限スクロールコンポーネント「反応無限」を使用して作成されます。コレクション内のアイテムの数を制限します。レンダリングされるコンポーネントのリストからアイテムを削除しますが、これを行うとスクロール位置を更新する必要があります。新しい要素を補うために移動します。

ので、同じように：

if (currentMediaItems.length > 40) { 
    currentMediaItems = currentMediaItems.splice(currentMediaItems.length - 40); 
} 

return <div style={style} > 
    <InfiniteScroll 
     next={this.fetchData.bind(this)} 
     hasMore={true}> 
     <StackGrid monitorImagesLoaded={true} gridRef={grid => this.grid = grid} columnWidth={this.props.columnwidth}> 
      {currentMediaItems} 
     </StackGrid> 
    </InfiniteScroll> 
</div>; 

InfiniteScrollがヒットし、「次へ」より多くのアイテムがロードされ、スクロールバーの位置を補償するように調整されるので、ウィンドウには、現在の位置に固定されたままです。

ただし、レンダリングするアイテムが40個以上あり、最後の40を除くすべての要素を削除することにした場合、スクロールバーは、ウィンドウを同じ相対位置に固定してウィンドウの下部に留まるようにオフセットされません。

削除された要素の数に基づいて正しいyスクロール位置を計算するにはどうすればよいですか？

Answer 1

あなたは、ウィンドウの位置を設定するために、プレーンJavaScriptを使用することができます：*要素数とオフセット現在のスクロールから削除要素の高さを計算してみ

window.scollTo(offsetX, offsetY); 

を。

react-virtualizedもチェックしてください。これは、あなたのようなユースケースには、多くのアイテムを含む実行可能リストを有効にするのに理想的です。