Skip to content

[fix] reset scroll when navigated from scrolled page#2735

Merged
benmccann merged 5 commits into
masterfrom
fix-router-scroll
Nov 5, 2021
Merged

[fix] reset scroll when navigated from scrolled page#2735
benmccann merged 5 commits into
masterfrom
fix-router-scroll

Conversation

@bluwy

@bluwy bluwy commented Nov 3, 2021

Copy link
Copy Markdown
Member

Fixes #2733 and maybe #2664

Move the scroll to top logic before the new route mounts so that we can properly compare the pageYOffset === 0. This works because scroll position is preserved between route changes by default.

I also updated our isVisble() tests to is_intersecting_viewport(), since isVisble checks for visibility anywhere in the document. is_intersecting_viewport makes sure they are in the viewport.

Nonetheless, @mquandalle and @mikenikles I'd appreciate if y'all can try to see if this branch fixes your issue as well.

Before submitting the PR, please make sure you do the following

  • It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
  • This message body should clearly illustrate what problems it solves.
  • Ideally, include a test that fails without this PR but passes with it.

Tests

  • Run the tests with pnpm test and lint the project with pnpm lint and pnpm check

Changesets

  • If your PR makes a change that should be noted in one or more packages' changelogs, generate a changeset by running pnpx changeset and following the prompts. All changesets should be patch until SvelteKit 1.0

@changeset-bot

changeset-bot Bot commented Nov 3, 2021

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: a27ed45

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@sveltejs/kit Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@benmccann

Copy link
Copy Markdown
Member

Could this result in a behavior of jumping to the top of the page and the down to the final scroll position?

Comment thread packages/kit/src/runtime/client/renderer.js Outdated
@bluwy

bluwy commented Nov 4, 2021

Copy link
Copy Markdown
Member Author

Could this result in a behavior of jumping to the top of the page and the down to the final scroll position?

This would technically happen from the code flow, but it happens between an await 0 so it should be fast enough that it's not noticeable, but otherwise I don't see another way around this unfortunately, unless we can hook into an event loop where the component is mounted but not yet called onMount().

Comment thread packages/kit/src/runtime/client/renderer.js Outdated
Comment thread packages/kit/src/runtime/client/renderer.js Outdated
bluwy and others added 3 commits November 4, 2021 20:21
Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com>
@bluwy bluwy added p1-important SvelteKit cannot be used by a large number of people, basic functionality is missing, etc. router labels Nov 5, 2021
@bluwy bluwy requested a review from benmccann November 5, 2021 04:04

@benmccann benmccann left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thanks for updating these tests!

@benmccann benmccann merged commit 34f18ae into master Nov 5, 2021
@benmccann benmccann deleted the fix-router-scroll branch November 5, 2021 04:16
@github-actions github-actions Bot mentioned this pull request Nov 5, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

p1-important SvelteKit cannot be used by a large number of people, basic functionality is missing, etc. router

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Page scroll position not reset to top on navigation (regression)

2 participants