React-virtualized: how to remember the last scroll position

Created on 18 Oct 2018 · 4Comments · Source: bvaughn/react-virtualized

I asked this in Slack channel, but NO ONE ANSWERED... so, I open this issue.

Currently, I use some components in ReactVirtualized in my app but I face the following problems. Hope anyone can help me here. THANKS.

I want to make the list remember the last scroll location when re-render after UnMount.

I have tried two different examples as followings:

<StaticRowHeightList />

with List, AutoSizer

For the first one, I give 100 data to the list with fixed row height which means the list do not need to calculate the row height dynamically. This example already successfully worked.

However for the second one:

<DynamicRowHeightList />

with List, AutoSizer, CellMeasurer, CellMeasurerCache

Also with 100 data, the list needs to calculate the row height dynamically with CellMeasurer. However this example is not working at all.

The problem with the second example ( <DynamicRowHeightList /> ) is that after DidMount (initialized), the CellMeasurerCache only records row height of 33 data.

Is that possible to pass in last data of CellMeasurerCache when create a new CellMeasurerCache. Just like new Cookie(cookieHeader).

If not possible, how to calculate the total row height of data at the same time. Or is there any solution to make the list remember the last scroll location when re-render after unmount?

Thanks in advanced.

@bvaughn

| | |
|-------------------|----------|
| Browser | chrome v70.0.3538.77 |
| OS | macOS Mojave v10.14 (18A391) |
| React | v16.6.0 |
| React DOM | v16.3.3 |
| react-virtualized | v9.21.0 |

Source

iTonyYo

👍2

Most helpful comment

OMG... Just solved this problem. Modify CellMeasurerCache directly.

componentWillUnmount() {
  const {
    saveScrollTop,
    saveMeasureCache
  } = this.props;

  saveScrollTop({
    scrollTop: this.scrollTop,
  });

  saveMeasureCache(this.cellCache._rowHeightCache);
}

componentDidMount() {
  const { rowHeightCache } = this.props;

  merge(
    this.cellCache,
    {
      _cellHeightCache: rowHeightCache,
      _rowHeightCache: rowHeightCache
    }
  );
}

iTonyYo on 18 Oct 2018

👍4

All 4 comments

OMG... Just solved this problem. Modify CellMeasurerCache directly.

componentWillUnmount() {
  const {
    saveScrollTop,
    saveMeasureCache
  } = this.props;

  saveScrollTop({
    scrollTop: this.scrollTop,
  });

  saveMeasureCache(this.cellCache._rowHeightCache);
}

componentDidMount() {
  const { rowHeightCache } = this.props;

  merge(
    this.cellCache,
    {
      _cellHeightCache: rowHeightCache,
      _rowHeightCache: rowHeightCache
    }
  );
}

iTonyYo on 18 Oct 2018

👍4

onScroll Funtion:

Callback invoked whenever the scroll offset changes within the inner scrollable region: ({ clientHeight: number, scrollHeight: number, scrollTop: number }): void