Scroll Restoration / History API

[Abiti-936]

First of All, I would like to say Thanks for an Awesome Work in solid-app-router & it's integration with Solid Start. I have seen Scroll Restoration or History API in Vue, Remix, Next.js, but Coming to Solid Start & solid-app-router I can't get it working. Every time when routing happens the page losts the Scroll Position.

Can You make Scroll Restoration in Solid App Router?

[rturnq]

Today we just rely on what the browser provides for scroll restoration which does work with both the default path/history integration and hash integration; however it seems limited to work within the next frame. So if you have to wait for resources or the rendering is expensive and the scrolling height isn't there yet, it will not work. Ideally going back and forward should used cached data but it looks like we need to do better here.

[orenelbaum]

For reference: https://reactrouter.com/en/main/components/scroll-restoration

[Brendan-csel]

The response to this react router issue seems relevant for lazy loaded data/components.

Essentially it suggests the user would need to add a router-provided hook/component into each lazy loaded page so it will only attempt to restore scroll after the page is fully rendered. On that basis, it might as well just be a router provided function the app-code called at an appropriate time after the page has finished loading (eg restoreScrollPosition).

[ryansolid]

The fact we use Suspense might make this different. We don't finish until all async is done (including lazy components). That being said Im seeing stuff to suggest that isn't the case but that's the intention.

[ilyador]

I'm not 100% sure it is related, but when I do:

onMount(() => {
  window.scrollTo(0, 500);
})

it works only when I open or refresh the page. Every time the route is changed through the router, this is ignored. Any idea how I can make this work on route change?

[Eifhen]

I'm not 100% sure it is related, but when I do:

onMount(() => {
  window.scrollTo(0, 500);
})

it works only when I open or refresh the page. Every time the route is changed through the router, this is ignored. Any idea how I can make this work on route change?

I have the same problem, for some reason the scroll event is not working when i work with pages that share the same layout

[r-Larch]

For reference: https://reactrouter.com/en/main/components/scroll-restoration

The ScrollRestoration from react-router-dom sounds like a great addition to solid router.

I would like such an API, maybe coupled with Suspence to restore scroll position after data fatching.

[rpivo]

For those trying to use some kind of window.scrollTo() logic, what worked for me was wrapping something like that inside a useBeforeLeave(). Maybe there will be a better way to do this in the future, but for now this worked for me as a way to programmatically set the scroll point for a specific item in history.