question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

scroll up an infiniteLoader that has scrollToIndex set bounces back to scrollToIndex

See original GitHub issue

repro 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:closed
  • Created 6 years ago
  • Comments:16 (5 by maintainers)

github_iconTop GitHub Comments

2reactions
mengdagecommented, Jun 25, 2018

@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.

0reactions
gigatesseractcommented, May 24, 2020

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.

this.setState({scrolled_index: index  + 20},  //this centers the row for my use case.    
          () =>{    
            this.setState({scrolled_index: -1})    
          });

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.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found