docs: add scroll management page#16410
Conversation
|
Install the latest version of pnpm add https://pkg.svelte.dev/@sveltejs/kit/c/f1f9105b414c3f7ad6824f1699b33a37939c1d9bOpen in Note This PR is from a fork. A maintainer must approve approve each commit before it can be built and installed. |
|
| </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. |
There was a problem hiding this comment.
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).
Adds the "scroll management" page to the advanced docs that #8723's review asked for. Rich preferred documenting the snapshot plus
afterNavigaterecipe 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
afterNavigatecallbacks, which wasn't the actual order until #10823 was fixed. On currentversion-3the ordering holds.Every claim on the page is verified against a real app using the documented layout verbatim (
html/bodywithoverflow: 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 afterafterNavigate, and the position survives a reload viasessionStorage. Thebehavior: 'instant'note keeps the reset immediate underscroll-behavior: smooth.Please don't delete this checklist! Before submitting the PR, please make sure you do the following:
Tests
pnpm testand lint the project withpnpm lintandpnpm checkChangesets
pnpm changesetand following the prompts. Changesets that add features should beminorand those that fix bugs should bepatch. Please prefix changeset messages withfeat:,fix:, orchore:.Edits