fix: add opt-in scroll restoration for view transitions#66
Open
sauravhathi wants to merge 1 commit into
Open
Conversation
When <ViewTransitions> wraps a Next.js app, the popstate handler's use of
document.startViewTransition() defers DOM updates, preventing the browser's
native scroll restoration from working. Back/forward navigation always
scrolls to the top.
This adds an opt-in scroll restoration mechanism via the options prop:
<ViewTransitions options={{ scroll: true }}>
When enabled, scroll positions are persisted into history.state (via
replaceState) on a debounced scroll listener and restored before the view
transition resolves on popstate navigation. This follows the same pattern
used by Remix and React Router.
Changes:
- browser-native-events.ts: Added saveScrollPosition helper, debounced
scroll listener, and scroll restore before transition resolve
- transition-context.tsx: Added ViewTransitionsOptions type and options
prop to ViewTransitions component
Fixes shuding#58
Fixes shuding#12
|
@sauravhathi is attempting to deploy a commit to the shu Team on Vercel. A member of the Team first needs to authorize it. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
When
<ViewTransitions>wraps a Next.js app, scroll restoration stops working. Navigating to a page and pressing back always scrolls to the top.Root cause: The
popstatehandler inbrowser-native-events.tswraps navigation indocument.startViewTransition(), which defers DOM updates and prevents the browser's/Next.js's scroll restoration from working.Solution
Adds opt-in scroll restoration via the
optionsprop:When enabled:
history.stateviareplaceState(debounced at 100ms)popstate, the saved position is read from the target history entryThis follows the same pattern used by Remix and React Router — positions are stored in
history.state.Changes
browser-native-events.ts: AddedsaveScrollPositionhelper, debounced scroll listener, and scroll restore before transition resolvetransition-context.tsx: AddedViewTransitionsOptionstype andoptionsprop toViewTransitionscomponentBreaking Changes
None. Scroll restoration is opt-in and disabled by default.
Fixes #58
Fixes #12