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