fix: Fix scroll restoration

[schiller-manuel]

No description provided.

[nx-cloud]

View your CI Pipeline Execution ↗ for commit a40e193.

Command	Status	Duration	Result
nx affected --targets=test:eslint,test:unit,tes...	✅ Succeeded	3m 27s	View ↗
nx run-many --target=build --exclude=examples/*...	✅ Succeeded	1m 22s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-01-29 21:49:52 UTC

[pkg-pr-new]

Open in Stackblitz

More templates

• tanstack-router-react-example-authenticated-routes
• tanstack-router-react-example-basic
• tanstack-router-react-example-basic-file-based
• tanstack-router-react-example-basic-file-based-codesplitting
• tanstack-router-react-example-basic-default-search-params
• tanstack-router-react-example-react-query
• tanstack-router-react-example-basic-react-query-file-based
• tanstack-router-react-example-basic-ssr-file-based
• tanstack-router-react-example-basic-ssr-streaming-file-based
• tanstack-router-react-example-basic-virtual-file-based
• tanstack-router-react-example-basic-virtual-inside-file-based
• tanstack-router-react-example-deferred-data
• tanstack-router-react-example-kitchen-sink
• tanstack-router-react-example-kitchen-sink-file-based
• tanstack-router-react-example-kitchen-sink-react-query
• tanstack-router-react-example-kitchen-sink-react-query-file-based
• tanstack-router-react-example-location-masking
• tanstack-router-react-example-large-file-based
• tanstack-router-react-example-navigation-blocking
• tanstack-router-react-example-quickstart
• tanstack-router-react-example-quickstart-esbuild-file-based
• tanstack-router-react-example-quickstart-file-based
• tanstack-router-react-example-quickstart-rspack-file-based
• router-monorepo-react-query
• tanstack-router-react-example-quickstart-webpack-file-based
• router-mono-simple
• router-mono-simple-lazy
• tanstack-router-react-example-scroll-restoration
• tanstack-search-validator-adapters
• tanstack-start-example-basic
• tanstack-start-example-basic-auth
• tanstack-start-example-basic-react-query
• tanstack-start-example-basic-rsc
• tanstack-start-example-convex-trellaux
• tanstack-start-example-clerk-basic
• tanstack-start-example-counter
• tanstack-start-example-large
• tanstack-start-example-supabase-basic
• tanstack-start-example-trellaux
• tanstack-router-react-example-with-framer-motion
• tanstack-router-react-example-with-trpc-react-query
• tanstack-router-react-example-with-trpc

@tanstack/arktype-adapter

npm i https://pkg.pr.new/@tanstack/arktype-adapter@3191

@tanstack/create-router

npm i https://pkg.pr.new/@tanstack/create-router@3191

@tanstack/directive-functions-plugin

npm i https://pkg.pr.new/@tanstack/directive-functions-plugin@3191

@tanstack/eslint-plugin-router

npm i https://pkg.pr.new/@tanstack/eslint-plugin-router@3191

@tanstack/history

npm i https://pkg.pr.new/@tanstack/history@3191

@tanstack/react-cross-context

npm i https://pkg.pr.new/@tanstack/react-cross-context@3191

@tanstack/create-start

npm i https://pkg.pr.new/@tanstack/create-start@3191

@tanstack/react-router

npm i https://pkg.pr.new/@tanstack/react-router@3191

@tanstack/react-router-with-query

npm i https://pkg.pr.new/@tanstack/react-router-with-query@3191

@tanstack/router-cli

npm i https://pkg.pr.new/@tanstack/router-cli@3191

@tanstack/router-core

npm i https://pkg.pr.new/@tanstack/router-core@3191

@tanstack/router-devtools

npm i https://pkg.pr.new/@tanstack/router-devtools@3191

@tanstack/router-generator

npm i https://pkg.pr.new/@tanstack/router-generator@3191

@tanstack/router-plugin

npm i https://pkg.pr.new/@tanstack/router-plugin@3191

@tanstack/router-vite-plugin

npm i https://pkg.pr.new/@tanstack/router-vite-plugin@3191

@tanstack/server-functions-plugin

npm i https://pkg.pr.new/@tanstack/server-functions-plugin@3191

@tanstack/start

npm i https://pkg.pr.new/@tanstack/start@3191

@tanstack/start-api-routes

npm i https://pkg.pr.new/@tanstack/start-api-routes@3191

@tanstack/start-client

npm i https://pkg.pr.new/@tanstack/start-client@3191

@tanstack/start-config

npm i https://pkg.pr.new/@tanstack/start-config@3191

@tanstack/start-plugin

npm i https://pkg.pr.new/@tanstack/start-plugin@3191

@tanstack/start-router-manifest

npm i https://pkg.pr.new/@tanstack/start-router-manifest@3191

@tanstack/start-server

npm i https://pkg.pr.new/@tanstack/start-server@3191

@tanstack/start-server-functions-client

npm i https://pkg.pr.new/@tanstack/start-server-functions-client@3191

@tanstack/start-server-functions-fetcher

npm i https://pkg.pr.new/@tanstack/start-server-functions-fetcher@3191

@tanstack/start-server-functions-handler

npm i https://pkg.pr.new/@tanstack/start-server-functions-handler@3191

@tanstack/start-server-functions-server

npm i https://pkg.pr.new/@tanstack/start-server-functions-server@3191

@tanstack/start-server-functions-ssr

npm i https://pkg.pr.new/@tanstack/start-server-functions-ssr@3191

@tanstack/valibot-adapter

npm i https://pkg.pr.new/@tanstack/valibot-adapter@3191

@tanstack/virtual-file-routes

npm i https://pkg.pr.new/@tanstack/virtual-file-routes@3191

@tanstack/zod-adapter

npm i https://pkg.pr.new/@tanstack/zod-adapter@3191

commit: a40e193

[rolftimmermans]

I found this change broke native browser scroll restoration in our app. This is because setupScrollRestoration() is called even when scrollRestoration is set to false. Is this intentional, or could there be a way to opt out entirely? I was happy with browser-native scroll restoration.

[tannerlinsley]

It’s called because it also handles hash scrolling. The actual restoration logic internally only runs if it’s turned on.

[rolftimmermans]

It’s called because it also handles hash scrolling. The actual restoration logic internally only runs if it’s turned on.

Thanks for your response! Much appreciated.

I guess the issue is: if no restoration happens, the page is scrolled to the top. See:

router/packages/react-router/src/scroll-restoration.tsx

Line 155 in 4d74d55

window.scrollTo({

This counteracts native scroll restoration. And it seems to be different behaviour than before this PR. Ideally I'd like a way to opt out of that altogether. Also OK if it means opting out of hash scrolling.

I'd be happy to create a PR for it. But of course only if you agree this is a valid option to provide. And what exactly the option should do – opt out of hash scrolling as well? or only opt out of the default scrolling to the top in case there is nothing to do?

[mihkelmark]

This release also broke the scroll restoration in my app.

After 30 minutes of reading the docs and trying to figure out how to have my app (with simple use cases) support the new version, I haven't succeeded. So I'm either thick or the documentation is not clear about this. Which is unlike the tanstack suite, so I'm guessing it's me.

I'm reverting back to the old version for now. Reluctantly, but will have to do it to move forward.

[tannerlinsley]

Would you have time to jump on a call soon to debug with me?

[tannerlinsley]

Dm me in discord.

[rolftimmermans]

For @mihkelmark or others in this thread; the reason things worked with native scroll restoration in the past was more or less accidental. Architectural changes in @tanstack/react-router after 1.98 require scroll restoration to be configured. In my case this was a matter of adding:

const router = createRouter({
  scrollRestoration: true,
  // ...
})

And in the virtualized tables in our application:

const restoration = useElementScrollRestoration({getElement: () => window})
const virtualizer = useWindowVirtualizer({
  initialOffset: restoration?.scrollY ?? 0,
  // ...
})

That is all!

Returning window from getElement() was not possible before yesterday, but @tannerlinsley graciously fixed this when investigating this use case with useWindowVirtualizer().

[schiller-manuel]

@rolftimmermans we should add the window part to the docs !
want to provide a PR to the docs? with a small example?

[rolftimmermans]

@rolftimmermans we should add the window part to the docs ! want to provide a PR to the docs? with a small example?

Sure! #3752