I have a react-virtualisedInfiniteLoader consisting of single rows.
The main issue I believe, is that each cell can vary in height and have to load in different images for each so the height is not static and changes as the images load in. But I am still seeing the issue even when the all the cells are the exact same height.
This is my current component using react-virtualisedInfiniteLoader with Grid
As you can see from this video, when you scroll to the bottom, then attempt to scroll up, it shifts wildly. It should only move up a few pixels but jumps a few more pixels than I'd expect.
And this is immediately after scrolling up just a few pixels on my mouse wheel
Notice how Test 752596 is close to the bottom and with the scroll, I'd expect it just be a little higher on the screen but a whole other item seems to appear when I would not expect it to. It's around the 8 second mark in the video and seems a lot more obvious there.
I have a
react-virtualised
InfiniteLoader
consisting of single rows.The main issue I believe, is that each cell can vary in height and have to load in different images for each so the height is not static and changes as the images load in. But I am still seeing the issue even when the all the cells are the exact same height.
This is my current component using
react-virtualised
InfiniteLoader
withGrid
As you can see from this video, when you scroll to the bottom, then attempt to scroll up, it shifts wildly. It should only move up a few pixels but jumps a few more pixels than I'd expect.
https://user-images.githubusercontent.com/20436343/169559360-71b21a58-eb49-43c4-ba35-189ecea6e305.mov
This is just before I scroll![Just before scrolling](https://i.stack.imgur.com/70i1r.png)
And this is immediately after scrolling up just a few pixels on my mouse wheel![enter image description here](https://i.stack.imgur.com/YclgW.png)
Notice how
Test 752596
is close to the bottom and with the scroll, I'd expect it just be a little higher on the screen but a whole other item seems to appear when I would not expect it to. It's around the 8 second mark in the video and seems a lot more obvious there.Here's a CodeSandbox that replicates the issue
Is there something I can do to make this smoother?