diff options
| author |  Justin Beaty <51970393+justinbeaty@users.noreply.github.com>
| 2023-08-31 09:20:26 -0700 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2023-08-31 12:20:26 -0400 |
| commit | af41b03d05f8a561990de42ccc93663343da2c0d (patch) | |
| tree | 9f15c9ea8c510c7b116c38a2b04b336c2033684f | |
| parent | c58472756ea30d2496592b2bde390cf858c1876f (diff) | |
| download | astro-af41b03d05f8a561990de42ccc93663343da2c0d.tar.gz astro-af41b03d05f8a561990de42ccc93663343da2c0d.tar.zst astro-af41b03d05f8a561990de42ccc93663343da2c0d.zip | |
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>
| -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'; |