0

I have an infinite scroll component built from React Virtualized's InfiniteLoader and Grid components. If I scroll down using my mouse wheel (ie. reasonably slowly) everything works great. However, when I click on the scrollbar inside the component and drag it down (moving much faster), I never make it to the bottom. Instead, after scrolling a certain percentage of the way down the scrollbar suddenly jumps back to the top.

I've tried adding console.log statements in Grid, but all they show is that the event.target.scrollTop goes from a really high number one moment to 0 the next. What I can't figure out though is why the event.target.scrollTop suddenly becomes 0 when all that I've done in the browser is move my mouse down (while holding the left-click button).

Does anyone have any idea how I can fix, or even just debug, this problem?

machineghost
  • 33,529
  • 30
  • 159
  • 234
  • 1
    We ran into something similar while developing our DataGrid product - http://reactdatagrid.com - For us atleast, it was a result of something in our code - put a conditional breakpoint in your event handler that only hits if scrollTop is 0 and look at the call stack - may be that might help. – flexicious.com Feb 15 '17 at 22:02

1 Answers1

0

This turned out to be user error.

Both InfiniteLoader and Grid take a rowCount prop, but the two are very different values. InfiniteLoader expects a rowCount of numItems, but Grid takes a rowCount of Math.ceil(numItems/columnCount). I "fixed" a separate issue by using the InfiniteLoader version for both, but what I really needed to do was pass different values for them.

Once I figured this out and set the two to separate values, the weird scrolling reset went away. Despite pouring through the React Virtualized source code for quite some time though, I still can't figure out where it causes an event with a target with a scrollTop of 0 to occur when the rowCount is exceeded. Oh well.

machineghost
  • 33,529
  • 30
  • 159
  • 234
  • Both can be passed the same `rowCount` value. Your `cellRenderer` just needs to handle unloaded rows (meaning, indices that exceed your local loaded list size). – bvaughn Feb 16 '17 at 16:53
  • Sorry to pickup an old post @bvaughn but could you explain a little more? My cellRenderer does handle unloaded rows but I'm still running into this issue. Could this be something in the cellRangeRenderer? – Giuseppe Sep 17 '18 at 14:11
  • Update - my issue actually seems to be connected to ArrowKeyStepper that wraps everything, it's causing the Grid to snap back to whatever the active row is when scrolling through many items at a time. – Giuseppe Sep 17 '18 at 15:04