Skip to content

Disabling scroll restoration when doing history.back() after pushState() #11452

@aradalvand

Description

@aradalvand

Describe the problem

I'm trying to use the new shallow routing feature to make it possible for users to close an app-like sidebar by using the back button, which I'd presume is the quintessential use case for this feature.

Things are working well apart from the fact that closing the sidebar (i.e. history.back()) often changes the document's scroll position, similar to how it's done upon page navigation, but in this particular case it's annoying and very much feels disruptive and inappropriate UX-wise.

You can see a basic example of this happening in the video below. Notice how the page underneath the sidebar is suddenly scrolled up as soon as the sidebar is closed (i.e. history.back() is invoked):

Rec.0006.mp4

Describe the proposed solution

I'm not quite sure if it's the browser doing this on its own (apparently not since SvelteKit seems to set history.scrollRestoration to manual) or if it's something SvelteKit is internally doing or at least has control over; if it's the latter, then it would be useful if, for example, pushState received an option similar to goto's noscroll, which disables this behavior. This can be desirable in cases where shallow routing is being used for opening and closing components such as modals and sidebars and so forth, where one normally doesn't expect the document's scroll position to change when closing the component.

Alternatives considered

No response

Importance

nice to have

Additional Information

No response

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions