How is possible to combine InfiniteLoader with WindowScroller?

Question

How can I create an infinite scroll list but in a window scroller? (the same as Facebook timeline - Mock up)?

Below is the code that I have tried, but it does not work as expected. It only displays the first items and after that it does not display anything more.

<div className={styles.WindowScrollerWrapper}>
    <InfiniteLoader
      isRowLoaded={this._isRowLoaded}
      loadMoreRows={this._loadMoreRows}
      rowCount={list.size}
      threshold={10}>
      {({ onRowsRendered, registerChild }) => (
        <WindowScroller>
          {({ height, isScrolling, scrollTop }) => (
            <AutoSizer disableHeight>
              {({ width }) => (

                <List
                  ref={registerChild}
                  className={styles.List}
                  autoHeight
                  height={height}
                  width={width}
                  onRowsRendered={onRowsRendered}
                  rowCount={list.size}
                  rowHeight={30}
                  rowRenderer={this._rowRenderer}
                  scrollToIndex={randomScrollToIndex}
                  />
              )}
            </AutoSizer>
          )}
        </WindowScroller>
      )}
    </InfiniteLoader>
</div>

Many thanks in advance.

Update

Here is the URL to demo: https://plnkr.co/edit/akyEpZ0cXhfs2jtZgQmN

@brianvaughn I have managed to put an example on plunker. Thanks! — Constantin Huleva, Jan 30 '17 at 08:06

score 18 · Accepted Answer · edited Jul 05 '18 at 15:10

Based on your Plnkr, here's a corrected Plnkr that shows how it should work. (You were forgetting to pass the scrollTop param from WindowScroller to the child List.)

Here you go:

    <InfiniteLoader
      isRowLoaded={this._isRowLoaded}
      loadMoreRows={this._loadMoreRows}
      rowCount={list.size}
      threshold={10}>
      {({ onRowsRendered, registerChild }) => (
        <WindowScroller>
          {({ height, isScrolling, scrollTop }) => (
            <AutoSizer disableHeight>
              {({ width }) => (
                <List
                  ref={registerChild}
                  className="List"
                  autoHeight
                  height={height}
                  width={width}
                  onRowsRendered={onRowsRendered}
                  rowCount={list.size}
                  rowHeight={30}
                  rowRenderer={this._rowRenderer}
                  scrollTop={scrollTop} />
              )}
            </AutoSizer>
          )}
        </WindowScroller>
      )}
    </InfiniteLoader>

What if the height is not known beforehand — just like FB newsfeed? — Poliakoff, Feb 19 '17 at 22:54
Use `CellMeasurer` (https://github.com/bvaughn/react-virtualized/blob/master/docs/CellMeasurer.md). It's mentioned pretty prominently in the docs. Check 'em out. — bvaughn, Feb 20 '17 at 08:18

How is possible to combine InfiniteLoader with WindowScroller?

1 Answers1