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

【问题标题】：Set window scroll position to compensate for elements being removed from webpage?设置窗口滚动位置以补偿从网页中删除的元素？
【发布时间】：2017-10-18 11:33:53
【问题描述】：

我有一组在 react-stack-grid 中呈现的 react 组件。当用户向下滚动时，使用 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 滚动位置？

【问题讨论】：

标签： javascript reactjs typescript react-redux

【解决方案1】：

您可以使用纯 JavaScript 来设置窗口位置：

window.scollTo(offsetX, offsetY);

尝试计算元素高度*元素计数，并从当前滚动偏移中移除。

您还应该查看react-virtualized。这非常适合像您这样的用例来启用包含大量项目的高性能列表。

【讨论】：