useElementScrollRestoration always returns undefined even with proper data-scroll-restoration-id

[johnstack94]

Which project does this relate to?

Router

Describe the bug

The useElementScrollRestoration hook consistently returns undefined even when properly implemented with a valid data-scroll-restoration-id. The hook should return scroll position data for elements marked with the proper data attribute, but it fails to capture or return any scroll position information.

Your Example Website or App

https://stackblitz.com/edit/github-dc3gr8?file=src%2Froutes%2Findex.tsx

Steps to Reproduce the Bug or Issue

1. Open the sandbox reproduction
2. Observe the console logs which show scrollPosition: undefined
3. Scroll the list of "Hello" items
4. Navigate away and back to the page
5. Notice that scroll position is not restored and hook still returns undefined

function HomeComponent() {
  const scrollRestorationId = 'myVirtualizedContent';

  const scrollPosition = useElementScrollRestoration({
    id: scrollRestorationId,
  });

  console.log('🚀 ~ scrollPosition:', scrollPosition);

  return (
    <div className="p-2">
      <h3>Welcome Home!</h3>
      <ul
        className="custom-scroll-container"
        data-scroll-restoration-id={scrollRestorationId}
      >
        {/* List items */}
      </ul>
    </div>
  );
}

Expected behavior

• The hook should return an object containing scrollX and scrollY values
• Scroll position should be maintained when navigating away and back to the component
• Console should show actual scroll position values instead of undefined

Screenshots or Videos

No response

Platform

• OS: [Windows 11]
• Browser: [Chrome]
• Version: [132.0]

Additional context

No response

[SeanCassiere]

@johnstack94 upon retesting using the reproduction provided, this feature is working as expected. See screen capture below.

Screen.Recording.2024-11-15.at.23.10.51.mov

---

For a scroll restoration to happen, you need to have gone back to the page in question.

For example, if you perform the steps of "Go to home", "Scroll down", "Go to about", and then "Go to home", then you've never actually performed a restoration (back navigation). So a restoration doesn't happen here, since the instructions the browser is getting is "Forward", "Forward", "Forward".

For restoration to happen in this instance, the order of steps needs to be "Go to home", "Scroll down", "Go to about", and then "Press the back button". Over here, the browser is being told "Forward", "Foward", "Back".

[johnstack94]

After battling with this for quite some time I figured out the root issue. I think.

Blitz: https://stackblitz.com/edit/tanstack-router-d9w1ja

So I modified the basic react query example to have a posts page that lists 75 posts to show the scrollbar. Then we can click on a post to open a new detail post page. In here I also fetch the same posts as I do in the posts page. (simulating a similar posts feature), clicking on a post there does not behave as I expect.

Steps to reproduce:

1. Click on posts in navbar
2. Click on a random post in posts page
3. Scroll down in detail post page and click a new post

I expect the page to scroll to top when navigating to a new post. Changing resetScroll on the Link component doesn't affect this behaviour.

Kind regards!