scroll up an infiniteLoader that has scrollToIndex set bounces back to scrollToIndex
See original GitHub issuerepro steps:
- have an infiniteloader with a list (or grid or …) with scrollToIndex set to something like 10000 => the list shows starting at the corresponding line
- scroll back up
- after a few lines the list jumps back to 10000 (only a few lines for Firefox, a bit more for Chrome) => this is only triggered when fresh data is loaded.
some investigation:
It looks very similar to https://github.com/bvaughn/react-virtualized/issues/595:
recomputeGridSize is called by InfiniteLoader once its new rows load. This in turn sets the _recomputeScrollTopFlag flag to true.
_recomputeScrollTopFlag is set to true in recomputeGridSize as follow:
this._recomputeScrollTopFlag = scrollToRow >= 0 && rowIndex <= scrollToRow;
I’m suspecting that this code is only valid when scrolling down but not up. If this is correct, recomputeGridSize should use this.state.scrollDirectionVertical to compute _recomputeScrollTopFlag and the same issue likely applies to horizontal scrolling too.
Issue Analytics
- State:
- Created 6 years ago
- Comments:16 (5 by maintainers)
Top Results From Across the Web
how to use scrollToIndex with infiniteLoader? - Stack Overflow
setting scrollToIndex to the line number and scrollToAlignment to "start" on the list did the trick.
Read more >React table horizontal scroll - Caritas Castellaneta
Scrolling the page to its beginning to return to the correct cell is ... Whether I'm scrolling up and down or left and...
Read more >react-virtualized - Bountysource
What is the current behavior? When I try to remove two rows and add one new row instead, the scroll jumps to the...
Read more >Achieving Infinite Scroll with react-infinite-loader npm Package
Infinite scroll is great for keeping users on your site longer. The need to click a button for the next batch of information...
Read more >FlatList scrollToIndex practical example. - Expo Snack
for(var i=0; i<number; ++i). {. data.push("" + i);. } return data;. } class ScrollToExample extends Component {. getItemLayout = (data, index) => (....
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
@wuweiweiwu Hi, it seems like people are too busy to fix this bug. I create https://github.com/bvaughn/react-virtualized/pull/1154 with fixed tests.
A tiny workaround
I was facing the same issue. I had to render 9k rows in total with a seek functionality for a particular row of interest. After seeking, scrolling up caused no issues, whereas when scrolling down, it automatically jumped to the already seeked row. (I am passing a state parameter to scrollToIndex prop which I am changing so that might rerender the list, but I could not explain why the issue does not come when scrolling up)
I solved the problem by resetting the scrollToIndex once scroll is complete.
I am passing
this.state.scrolled_index
to the List component. I am currently working in a project with deadlines. Will get a plunker up and running as soon as possible. Will love to see a fix for this issue.