Skip to content

get access to scroll positions in navigation callbacks #9914

@kinglouie

Description

@kinglouie

Describe the problem

I am developing an animation heavy website with sveltekit where i have a three.js scene in a layout that does some transitioning between pages and also on scroll. The issue I am facing is that when using browser back button and the previous page was scrolled down, i can not do the correct page transition animation because I don't know the scroll offset of the target page. At the moment I transition the three.js scene as if the target page is at 0 y offset and then the scene updates according to the scroll position with a visible disruption.

Repro:

  1. visit https://www.morrowsix.de/
  2. scroll down a bit and click on one of the two project cards
  3. use browser back button

Result: logo in the background scene transitions as if target page was at 0 y offset and then the scenes update function that uses the scroll offset puts the logo in the correct position.

Currently i trigger my transition animation in beforeNavigate

Describe the proposed solution

have the target page scroll offset available somewhere in beforeNavigate and/or afterNavigate

Alternatives considered

I digged a bit in the source and found that sveltekit saves the scrolloffsets in sessionstorage along with an id that can be matched with the history. Before writing a function to extract the information by myself i wanted to ask here if my proposed solution would be feasable to implement upstream.

Importance

nice to have

Additional Information

No response

Metadata

Metadata

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions