Previous List Items Page Lost Scroll Position When Navigated Back

[davie1989]

Describe the bug

Hello,

This might not really be a bug per say. But I do noticed that when I render a list, then I clicked on one list to navigate to another page, when I navigate back or click the browser back button, my previous scroll position is maintained which is fine. But this is when I am still in the first few list.

When I scroll down a lot and clicked on a list to navigate to another page, upon coming back, I expect to see the list that I clicked on. However, it seems the page lost its position. I would rather see another list item.

Let me mention that my list are in dynamic sizes and I am using the useWindowVirtualizer.

Attached codesandbox link is just a minimal sample.

Thanks.

Your minimal, reproducible example

https://codesandbox.io/s/cold-bird-qmsbtf?file=/src/App.js

Steps to reproduce

1. Render your list items.
2. Click on an item to navigate to another page,
3. upon coming back, the scroll position is lost.

Expected behavior

I expect the list scroll position to still be maintained.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

Windows, Chrome

tanstack-virtual version

3.0.0-beta.54

TypeScript version

No response

Additional context

No response

Terms & Code of Conduct

• I agree to follow this project's Code of Conduct
• I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

[jvllmr]

+1 on this. Planned to file an issue on this today as well. Additionally, when using React-Router with its Scroll Restoration component (https://reactrouter.com/en/main/components/scroll-restoration) scroll restoration when navigating back also does not work.

[piecyk]

@davie1989 you need to store the current location and pass it to virtualizer when going back, checkout this issue #378

@jvllmr hmm will check the React-Router Scroll Restoration maybe there is an easy way to integrate with it.

[jvllmr]

@davie1989 you need to store the current location and pass it to virtualizer when going back, checkout this issue #378

@jvllmr hmm will check the React-Router Scroll Restoration maybe there is an easy way to integrate with it.

Sadly, there isn't really. All the positions in react-router are saved in a variable which isn't exported: https://github.com/remix-run/react-router/blob/d5fa8fb730cf8859903cf4d049e66901a83fb7ce/packages/react-router-dom/index.tsx#L1169

[piecyk]

https://github.com/remix-run/react-router/blob/d5fa8fb730cf8859903cf4d049e66901a83fb7ce/packages/react-router-dom/index.tsx#L1169

looks like position is saved on sessionStorage with react-router-scroll-positions key, i think you can read same value and pass it to virtualizer, something like

  const vrtualizer = useWindowVirtualizer({
    count: 100,
    estimateSize: () => 50,
    initialOffset: JSON.parse(sessionStorage.getItem('react-router-scroll-positions') || '0'))
  });

[jvllmr]

Yes, I did that already and it would work if the data was close to live. However, React-Router only writes to sessionStorage when the page is reloaded or left. All live data is saved in the private object. I already opened a discussion regarding this: remix-run/react-router#10480

[piecyk]

@jvllmr so you would need to update it by hand, before doing navigate.

[davie1989]

@davie1989 you need to store the current location and pass it to virtualizer when going back, checkout this issue #378

@jvllmr hmm will check the React-Router Scroll Restoration maybe there is an easy way to integrate with it.

I followed the steps here and everything is perfect now. Thanks everyone and also the TanStack team. You're all awesome.

[piecyk]

@davie1989 great that it works, i think we can close this issue.

[jvllmr]

@piecyk Apologies. It is actually possible to retrieve the saved scroll positions saved by React-Router's ScrollRestoration component:

import { UNSAFE_DataRouterStateContext } from "react-router-dom";

export function useSavedScrollPosition() {
  const state = React.useContext(UNSAFE_DataRouterStateContext);

  return state?.restoreScrollPosition || 0
}