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击中＆＃39; next＆＃39;加载更多项目并调整滚动条位置以进行补偿，使窗口保持固定在当前位置。

但是，如果我要渲染超过40个项目并决定删除除最后40个之外的所有元素，则滚动条不会偏移以保持窗口固定在相同的相对位置，而是保持在窗口的底部。

如何根据删除元素的数量计算正确的y滚动位置？

Answer 1

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

window.scollTo(offsetX, offsetY);

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

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

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

1 个答案: