Keeping previous scroll position when using useWindowVirtualizer
I am currently using the
useWindowVirtualizer hook for a large list of about 2000+ items. I am also using react-router-dom (but not against migrating to tanstack router but it will be quite a large refactor)
When I scroll down the list and click on any item to go to the single item page and then go and click the browers back button, I want the list to scroll to that item. But if just goes back to the top of the page.
I removed the actual virtualizer part and just renderd it as a pure html ul list and it works as expected, so it must be something to do with the useWindowVirtualizer hook. Im guessing it must be to do with the initialOffest or something.
I have created a really basic example from one of the react-virtuals examples. If you scroll down the page abit and then click on any item it takes you to a random page. Now just click back on the browser, and it will send you back to the top of the page rather than point in the list you were at
https://codesandbox.io/p/devbox/flamboyant-curran-slxj7t
In the past I have used react-virtualized and it didnt have this issue. Ideally I want to stick @tanstack/react-virtual as this does seem like a better package6 Replies
correct-apricotā¢10mo ago
Yes, in this case, you need to save the scrollOffset and pass it to initialOffset when navigating back. This ensures the scroll position is restored correctly. There are a few discussions and examples on this topic in GitHub issues/discussions
sensitive-blueOPā¢9mo ago
@piecyk
I thought I had resolved this but doesnt seem like I have. Is there a good example or topic on github?
correct-apricotā¢9mo ago
@Richster you can check this issue https://github.com/TanStack/virtual/issues/378
GitHub
Scroll restoration doesn't work when using useWindowVirtualizer Ā· I...
Describe the bug Scroll restoration doesn't work when using useWindowVirtualizer. I used react-virtualized and it works fine. Your minimal, reproducible example https://stackblitz.com/edit/next...
sensitive-blueOPā¢9mo ago
so it 'works' but doesn't really work if you have multiple tables throughout your app as they all then start at that new offest position š¦ I could give each table a unique id and thats what gets saved in storage for the scroll.
But another problem is that it doesnt know if you came to that table via the browsers navigation or via a button on your site.
If I clicked a button within my site I would probably expect the table to be at the top but if I navigated via the back and forward buttons I would hope it would save my position.
Somehow
react-virtualized does it and it work like that but the package is just way to complicated and over engineered which is why I would prefer to just use this packagecorrect-apricotā¢9mo ago
@Richster can you check how
react-virtualized does it then we can then implement something similar on tanstack side, don't have the bandwidth to check it nowsensitive-blueOPā¢9mo ago
@piecyk I think it because it seems to be saving some reference to each table in a variable outside of the components instance so itās always accessible and only gets reset on refresh.
I think this is the file thatās doing it. Ive got something working similar to it but just now working on the āresettingā when someone doesnt use the back and forward buttons
https://github.com/bvaughn/react-virtualized/blob/master/source/WindowScroller/utils/onScroll.js
GitHub
react-virtualized/source/WindowScroller/utils/onScroll.js at master...
React components for efficiently rendering large lists and tabular data - bvaughn/react-virtualized