michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

View Transitions: use history.scrollRestoration="manual" (#8231)

Browse source 
* 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>
This commit is contained in:
Justin Beaty 2023-08-31 09:20:26 -07:00 committed by GitHub
parent c58472756e
commit af41b03d05
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 14 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/twenty-crabs-fry.md Normal file
View file

@ -0,0 +1,5 @@
---
'astro': patch
---
Fixes scroll behavior when using View Transitions by enabling `manual` scroll restoration

9
packages/astro/components/ViewTransitions.astro
View file

@ -347,9 +347,18 @@ const { fallback = 'animate' } = Astro.props as Props;
// Just ignore stateless entries. // Just ignore stateless entries.
// The browser will handle navigation fine without our help // The browser will handle navigation fine without our help
if (ev.state === null) { if (ev.state === null) {
if (history.scrollRestoration) {
history.scrollRestoration = "auto";
}
return; 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 state: State | undefined = history.state;
const nextIndex = state?.index ?? currentHistoryIndex + 1; const nextIndex = state?.index ?? currentHistoryIndex + 1;
const direction: Direction = nextIndex > currentHistoryIndex ? 'forward' : 'back'; const direction: Direction = nextIndex > currentHistoryIndex ? 'forward' : 'back';