设置窗口滚动位置以补偿正在从网页中删除的元素？

Question

我有一系列在react-stack-grid中呈现的反应组件。当用户向下滚动时，使用react-infinite-scroll-component填充集合，以限制集合中的项目数量，我从正在呈现的组件列表中删除项目，但是当我这样做时，滚动位置需要更新并且移动以补偿新元素。

像这样：

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。对于像您这样的用例来说，这非常适合启用包含大量项目的高性能列表。