From af41b03d05f8a561990de42ccc93663343da2c0d Mon Sep 17 00:00:00 2001 From: Justin Beaty <51970393+justinbeaty@users.noreply.github.com> Date: Thu, 31 Aug 2023 09:20:26 -0700 Subject: [PATCH] View Transitions: use history.scrollRestoration="manual" (#8231) * View Transitions: use history.scrollRestoration="manual" * Update changeset * Set scrollRestoration to manual before popState Co-authored-by: Martin Trapp <94928215+martrapp@users.noreply.github.com> --------- Co-authored-by: Nate Moore Co-authored-by: Martin Trapp <94928215+martrapp@users.noreply.github.com> --- .changeset/twenty-crabs-fry.md | 5 +++++ packages/astro/components/ViewTransitions.astro | 9 +++++++++ 2 files changed, 14 insertions(+) create mode 100644 .changeset/twenty-crabs-fry.md diff --git a/.changeset/twenty-crabs-fry.md b/.changeset/twenty-crabs-fry.md new file mode 100644 index 0000000000..40e38852c3 --- /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 0800b00333..ea56a60b98 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';