Scroll position restoration

[agusterodin]

Is your feature request related to a problem? Please describe. Browsers (like Chrome) have started to support scroll position restoration when navigating through single page application history. All of my React projects do this without me needing to do anything and is performed by the browser via history api as far as I know. This is obviously only supported on the page body scroll position. Instantiating OS on my project's body causes the browser's scroll position restoration functionality to break.

Describe the solution you'd like Retain body scroll position restoration when using OS on body element. It would also be cool if you could do it on embedded components (non-body) when needed as well like Gatsby does with a hook (https://www.gatsbyjs.com/docs/scroll-restoration/). That would be a pain to implement since at a glance of the source Gatsby scroll restoration hook is tied in at the router level and uses session storage as well.

Describe alternatives you've considered Implementing custom logic to capture scroll position on a per page basis. Seems like a dead end solution as even the maintainer of react-router ripped his implementation out a long time ago in favor of stock browser functionality (https://reactrouter.com/web/guides/scroll-restoration).

Additional context https://developer.mozilla.org/en-US/docs/Web/API/History/scrollRestoration

[KingSora]

Good day @agusterodin Sorry for the late reply, but I was quite busy with other things.

Because this feature is relying on a non modified body element, this will probably be support in v2.0.0. This would now also work out of the box, but only if you could define the rootScroller. So for v1.x you have to do it by yourself, I'm sorry.

[KarolBuchta]

Hi - thank you for your great plugin and spending so much time on it.

I have a comment that goes into a similar direction:

I have added your plugin into an application - and figured out after a while that in Chrome and other webkit browsers the function, that an URL-Hash usually has (scrolling to the container with the respective ID), does not work anymore.

I use your plugin for elements inside the body - not for the body-Element itself.

I assume the problem is the same as you mentioned above - the modification of the body element. I can currently only say, that commenting out the lines for the initialization fixes the problem.

I would like to stick with your plugin - but I don't understand fully what to do with the advice of "defining the rootScroller".

If you have time to answer - great. Otherwise you'd have another item to look at when doing the re-write. I would try another library then.

Best and thank you Karl.

[agusterodin]

I see that 2.x is in beta. Do you know if 2.x supports scroll position restoration?

[KingSora]

@agusterodin Yes it should.. I'll release v2. probably at the end of the month, but feel free to test it until then :)

[KingSora]

v2 released today where this issue should be fixed :)

[agusterodin]

Worked perfectly! Because of your improvements I was able to remove lines like this from my links:

overlayScrollbar !== undefined ? overlayScrollbar.scroll({ x: 0, y: 0 }) : window.scrollTo(0, 0)

^ this type of thing led to janky jittering when the link was clicked and route was changed, even when OverlayScrollbars was completely disabled and uninitialized.

This allows Next/Link (in Next.js) to do it's thing which fixes scroll restoration and janky jitter when scrolling back up on link click.

Thanks!!!

[KingSora]

Happy to hear that! :)