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 <natemoo-re@users.noreply.github.com> Co-authored-by: Martin Trapp <94928215+martrapp@users.noreply.github.com>
withastro · Aug 31, 2023 · af41b03 · af41b03
1 parent c584727
commit af41b03
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 0 deletions.
diff --git a/.changeset/twenty-crabs-fry.md 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
@@ -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';