Previous List Items Page Lost Scroll Position When Navigated Back · Issue #551 · TanStack/virtual · GitHub
Skip to content

Previous List Items Page Lost Scroll Position When Navigated Back #551

Closed
Closed
Previous List Items Page Lost Scroll Position When Navigated Back#551

Description

@davie1989
davie1989
opened on May 11, 2023

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.

Activity

  1. jvllmr commented on May 11, 2023

    @jvllmr
    jvllmr
    on May 11, 2023

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

  2. piecyk commented on May 11, 2023

    @piecyk
    piecyk
    on May 11, 2023
    Collaborator

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

  3. jvllmr commented on May 11, 2023

    @jvllmr
    jvllmr
    on May 11, 2023

    @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

  4. piecyk commented on May 11, 2023

    @piecyk
    piecyk
    on May 11, 2023
    Collaborator

    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'))
  });

  5. jvllmr commented on May 11, 2023

    @jvllmr
    jvllmr
    on May 11, 2023

    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

  6. piecyk commented on May 11, 2023

    @piecyk
    piecyk
    on May 11, 2023
    Collaborator

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

  7. davie1989 commented on May 11, 2023

    @davie1989
    davie1989
    on May 11, 2023
    Author

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

  8. piecyk commented on May 12, 2023

    @piecyk
    piecyk
    on May 12, 2023
    Collaborator

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

  9. piecyk
    closed this as completedon May 12, 2023

  10. jvllmr commented on May 16, 2023

    @jvllmr
    jvllmr
    on May 16, 2023

    @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
}
  11. tannerlinsley
    added a commit that references this issue on May 20, 2026

    perf: virtual-core rewrite for mount/measure-storm, plus iOS Safari h…

    99355ad
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions