ScrollToIndex not scrolling as expected
See original GitHub issueI’ve created a small repro based on what we’re experiencing trying to make use of <List />
's scrollToIndex
prop. I believe it’s a bug, given how simple the repro is and how closely we’ve attempted to follow documentation / examples, but it’s always possible we’ve just mixed something up.
What is the current behavior?
- Clone the repro here
- Build and start the app (I’ve been using recent version of Chrome)
- Enter a number between 0 and 999 in the number input at the top of the screen
Despite the scrollToIndex
state in <App />
being updated, which feeds down to the <List />
's scrollToIndex
prop, the list is not navigated to the desired list element as expected.
What is the expected behavior?
The element at the index given in the number input box is navigated to.
Which versions of React and react-virtualized, and which browser / OS are affected by this issue? Did this work in previous versions of react-virtualized?
Browser | Chrome v69.0.3497.100 |
OS | Windows 10 |
React | 16.5.2 |
React DOM | 16.5.2 |
react-virtualized | 9.20.1 |
Issue Analytics
- State:
- Created 5 years ago
- Reactions:2
- Comments:14 (1 by maintainers)
Top Results From Across the Web
ScrollToIndex does not scroll the FlatList as expected
It seems no scrolling action is taking place. This is an expo project with "sdkVersion": "33.0.0" and React and RN as follows from...
Read more >React Native FlatList scrollToIndex with Fixed or Variable Row ...
In this video, I show you how to use the scrollToIndex function to scroll to a row with a certain index in a...
Read more >React native scrollview cannot scroll to bottom
React Native ScrollView is not scrolling (we think the issue is not with the ... scrollToIndex() scrollToIndex((params: object)); Scrolls to the item at...
Read more >Building a Smooth Image Carousel with FlatList in React Native
Users can scroll through items by dragging across right or left to ... The <FlatList /> component's reference comes with a scrollToIndex ......
Read more >FlatList - React Native
Footer support. Separator support. Pull to Refresh. Scroll loading. ScrollToIndex support. Multiple column support. If you need section support, ...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I have the same bug. so bad
I’m using this currently as a workaround. It’s pseudo-code that I extracted from a much larger file, but it’s a start on a workable solution.
Basically it manually calls getOffsetForRow after mounting, then scrolls the window the correct location. The
scrollToIndex
prop is still required, or else theList
component will not render the correct rows initially.I have been using this with WindowScroller, so I have no idea if it works solo as WindowScroller does things like patch the scrollTop.