Définir la position de défilement de la fenêtre pour compenser les éléments supprimés de la page Web?

Question

J'ai une collection de composants de réaction qui sont rendus dans react-stack-grid. Comme l'utilisateur fait défiler la collection est peuplée en utilisant reag-infinite-scroll-component, pour limiter le nombre d'éléments dans la collection je supprime des éléments de la liste des composants rendus, mais quand je fais cela, la position de défilement doit être mise à jour déplacer pour compenser les nouveaux éléments.

Comme si:

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>; 

Quand NeXT 'plus d'articles sont chargés InfiniteScroll Tubes et la position de la barre de défilement est ajustée pour compenser si la fenêtre reste fixe dans sa position actuelle. Toutefois, si j'ai plus de 40 éléments à rendre et que je décide de supprimer tous les éléments sauf les 40 derniers, la barre de défilement n'est pas décalée pour maintenir la fenêtre dans la même position relative et reste au bas de la fenêtre.

Comment calculer la position de défilement y correcte en fonction du nombre d'éléments supprimés?

Answer 1

Vous pouvez utiliser JavaScript simple pour définir la position de la fenêtre:

window.scollTo(offsetX, offsetY); 

Essayez de calculer la hauteur de l'élément * élément compte et retirer du rouleau offset courant.

Vous devez également vérifier react-virtualized. C'est idéal pour un cas d'utilisation comme le vôtre pour activer des listes performantes avec beaucoup d'éléments.