Skip to content

docs: add scroll management page#16410

Open
Nic-Polumeyv wants to merge 3 commits into
sveltejs:version-3from
Nic-Polumeyv:docs-scroll-management
Open

docs: add scroll management page#16410
Nic-Polumeyv wants to merge 3 commits into
sveltejs:version-3from
Nic-Polumeyv:docs-scroll-management

Conversation

@Nic-Polumeyv

Copy link
Copy Markdown
Contributor

Adds the "scroll management" page to the advanced docs that #8723's review asked for. Rich preferred documenting the snapshot plus afterNavigate recipe over adding a container attribute to client.js, teemingc suggested documenting it again later on #2733, and the page never got written.

One reason it couldn't be written sooner: the recipe relies on snapshots restoring after the afterNavigate callbacks, which wasn't the actual order until #10823 was fixed. On current version-3 the ordering holds.

Every claim on the page is verified against a real app using the documented layout verbatim (html/body with overflow: hidden, inner scroller): without the recipe the container keeps its scroll position across navigations, with it forward navigations reset to top, back navigations restore the saved position, capture runs before the page updates, restore runs after afterNavigate, and the position survives a reload via sessionStorage. The behavior: 'instant' note keeps the reset immediate under scroll-behavior: smooth.


Please don't delete this checklist! 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 pnpm changeset and following the prompts. Changesets that add features should be minor and those that fix bugs should be patch. Please prefix changeset messages with feat:, fix:, or chore:.

Edits

  • Please ensure that 'Allow edits from maintainers' is checked. PRs without this option may be closed.

@pkg-svelte-dev

pkg-svelte-dev Bot commented Jul 18, 2026

Copy link
Copy Markdown

Install the latest version of @sveltejs/kit from f1f9105:

pnpm add https://pkg.svelte.dev/@sveltejs/kit/c/f1f9105b414c3f7ad6824f1699b33a37939c1d9b

Open in pkg.svelte.dev: https://pkg.svelte.dev/repos/kit/pr/16410

Note

This PR is from a fork. A maintainer must approve approve each commit before it can be built and installed.

@changeset-bot

changeset-bot Bot commented Jul 18, 2026

Copy link
Copy Markdown

⚠️ No Changeset found

Latest commit: f1f9105

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

</div>
```

On every navigation, `capture` saves the container's scroll position against the outgoing history entry immediately before the page updates, and `afterNavigate` scrolls new pages to the top. On back and forward navigations, `restore` is called with the saved position after the `afterNavigate` callbacks have run, so the two don't conflict. Snapshots are persisted to `sessionStorage`, so the position also survives a reload. Links with a `#hash` keep working, since SvelteKit scrolls the targeted element into view within its container after the reset.

@vercel vercel Bot Jul 18, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

The scroll-management recipe resets the container to the top after SvelteKit's hash scroll, so #hash links do not stay in view, contradicting the doc's claim that they still end up at the targeted element.

Fix on Vercel

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

The ordering claim is removed in f1f9105. The target still ends up in view though, the focus handling re-triggers the browser's fragment scroll after the reset (container at 2428 in an instrumented run, with a sub-100ms transient at the top).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant