diff options
| -rw-r--r-- | .changeset/twenty-crabs-fry.md | 5 | ||||
| -rw-r--r-- | packages/astro/components/ViewTransitions.astro | 9 |
2 files changed, 14 insertions, 0 deletions
diff --git a/.changeset/twenty-crabs-fry.md b/.changeset/twenty-crabs-fry.md new file mode 100644 index 000000000..40e38852c --- /dev/null +++ b/.changeset/twenty-crabs-fry.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Fixes scroll behavior when using View Transitions by enabling `manual` scroll restoration diff --git a/packages/astro/components/ViewTransitions.astro b/packages/astro/components/ViewTransitions.astro index 0800b0033..ea56a60b9 100644 --- a/packages/astro/components/ViewTransitions.astro +++ b/packages/astro/components/ViewTransitions.astro @@ -347,9 +347,18 @@ const { fallback = 'animate' } = Astro.props as Props; // Just ignore stateless entries. // The browser will handle navigation fine without our help if (ev.state === null) { + if (history.scrollRestoration) { + history.scrollRestoration = "auto"; + } return; } + // With the default "auto", the browser will jump to the old scroll position + // before the ViewTransition is complete. + if (history.scrollRestoration) { + history.scrollRestoration = "manual"; + } + const state: State | undefined = history.state; const nextIndex = state?.index ?? currentHistoryIndex + 1; const direction: Direction = nextIndex > currentHistoryIndex ? 'forward' : 'back'; |