Restore independent scroll and focus reset controls
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 20.8k
- Forks
- 2.3k
- Avg merge
- 1d 16h
- Merged PRs (30d)
- 156
Description
Describe the problem
SvelteKit 3 replaces data-sveltekit-noscroll and data-sveltekit-keepfocus with a single data-sveltekit-reset attribute. This couples two independent navigation behaviours and removes useful combinations.
For example, category links may need to reset scroll so that new content starts at the top, while preserving focus on the selected category for keyboard navigation. Conversely, opening a panel as a shallow subroute may need to preserve scroll while moving focus into the panel.
data-sveltekit-reset can only reset both or neither. The name is also overly broad and can be confused with resetting navigation state.
Describe the proposed solution
Provide independent controls again, preferably with active names:
data-sveltekit-reset-scrolldata-sveltekit-reset-focusgoto(..., { resetScroll, resetFocus })
data-sveltekit-reset could remain as shorthand for resetting both.
Alternatives considered
I currently emulate the missing granularity in my root layout:
data-sveltekit-reset={false}is applied to the entire app, so SvelteKit preserves both scroll and focus for every navigation.- An
afterNavigatecallback manually callsscrollTo(0, 0)for regular link navigations when the pathname changes. This resets scroll while still preserving focus. - Links that should also preserve scroll are explicitly marked with
data-sveltekit-reset={false}. The callback detects the attribute on the click target and skips the manual scroll reset.
This gives me the two behaviours that used to be independently expressible: preserve focus while resetting scroll, or preserve both.
However, it is a fragile workaround. It reimplements part of SvelteKit’s navigation behaviour, relies on the click event target, only handles selected link navigations and pathname changes, and may behave differently for nested click targets, fragments, redirects, history navigation, or programmatic navigation.
Importance
i cannot use SvelteKit without it
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by tracing the existing data-sveltekit-reset behavior and the goto navigation options in SvelteKit. Check how link navigation, programmatic navigation, fragments, redirects, and history navigation currently handle scroll and focus. Done means reset-scroll and reset-focus work independently, reset remains a shorthand for both, and the documented combinations behave consistently.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend, web-dev
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 55/100