React - 无限滚动 - child 个具有动态高度的元素

Question

我正在使用来自 (https://github.com/seatgeek/react-infinite) 的 react-infinite，以便在用户滚动时加载数据。

我的问题是 child 元素（在容器内），它们的高度是动态的。

这是html的结构：

<Infinite class="container" containerHeight={ContainerHeight} elementHeight={rowHieght}>
    <div class="child"> </div>
    <div class="child"> </div>
    ..
</Infinite>

所以当我传递无穷大的 rowHeight 和 containerHeight 时，我会动态计算它们。

问题是 child 可以有不同的高度（意思是第一个 child 可以有 100 的高度，白色第二个可以有 300）。

这使得无限滚动有时会卡住。

这是否是无限滚动的可能场景。

Answer 1

通过document，可以这样设置：

<Infinite containerHeight={200} elementHeight={[111, 252, 143]}>
    <div className="111-px"/>
    <div className="252-px"/>
    <div className="143-px"/>
</Infinite>

React - 无限滚动 - child 个具有动态高度的元素

React - Infinite scrolling - child elemnts with dynamic heights

javascript

infinite-scroll

reactjs