Handle scrolling when router outlet is inside "overflow: scroll"

[orenelbaum]

When the <Routes> component is inside an element with overflow: scroll it messes up both the scroll to top behavior built into the router and the scroll restoration built into the browser. I'm suggesting adding a feature that handles this.
You can see a demonstration of this here:
https://stackblitz.com/github/orenelbaum/solid-router-overflow-scroll-demo
https://github.com/orenelbaum/solid-router-overflow-scroll-demo

[Brendan-csel]

React router also only seems to handle restoring the window scroll position automatically too - looking at this code anyway.

I suspect any other scrolling containers might need to be handled by app code.

[orenelbaum]

The code you're looking at is for async rendering of the page which breaks the scroll restoration built into the browser.
There's an open issue for it #99
Why can't we provide the functionality for scrolling containers though? I mean I'm not sure if we can completely automate it but even if we can't we can probably provide the functionality and let the user just do some basic setup instead of making the user either implement it themselves which is harder than it might seem, or go for a 3rd party solution.

[Brendan-csel]

Have you seen an API for restoring other container(s) in any other routers? It would be good to see if there is a proven approach out there.

[Brendan-csel]

I see a pull request (not merged) in react router to be able to provide an id prop to their scroll restoration hook/component for the scrollable container. So I guess that might be an option - if we add a scroll remember/restore feature sometime.

[orenelbaum]

Yeah I also only found an abandoned attempt by react router.
You can read more about it here https://v5.reactrouter.com/web/guides/scroll-restoration
Apparently they just lost motivation, but in the last paragraph they are even talking about a Solid solution.

[orenelbaum]

More things I found:
remix-run/remix#186
remix-run/react-router#9495
swup/scroll-plugin#24
https://github.com/ytase/react-router-scroll/