scroll to first element using List and AutoSizer doesn't work

Question

I wanted to scroll back up to the first element in the List when a user clicks pagination buttons. So far I come across scrollToRow and scrollToIndex and both of them didn't work.

Here's my current code:

<AutoSizer disableWidth>
{({ height }) => (
    <div>
        <List
            ref="list"
            height={height}
            rowCount={this.state.items.length}
            rowHeight={115}
            rowRenderer={this._rowRenderer}
            width={1}
            scrollToRow={0}
            containerStyle={{
                width: '100%',
                maxWidth: '100%',
            }}
            style={{
                width: '100%',
                marginBottom: '10px',
            }}
        />
    </div>
)}
</AutoSizer>

score 0 · Accepted Answer · answered Jul 16 '20 at 21:12

After a little bit of thinking, I found out that there's no need to use react-virtualized package anymore. Since I refactored the list to make use of SSR pagination showing 24 items at a time. So, it was an overkill.

Anyway, I just reused the same _rowRenderer() function to map items into a list. To achieve the scrolling behavior I just added the styling prop of "overflow: scroll". Thats all.

scroll to first element using List and AutoSizer doesn't work

1 Answers1