Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2025-01-20 22:12:38 -05:00
Code Issues Activity

Mt scroll behavior (#8184)

Browse source 
* The scrolling behavior of ViewTransition is now more similar to the expected browser behavior

* format

* removed browser detection
This commit is contained in:
Martin Trapp 2023-08-22 19:33:49 +02:00 • committed by GitHub
parent fddd4dc71a
commit 9142178b11
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 18 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/pretty-dancers-admire.md Normal file
View file

@ -0,0 +1,5 @@
---
'astro': patch
---
Fix: The scrolling behavior of ViewTransitions is now more similar to the expected browser behavior

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

@ -164,14 +164,21 @@ const { fallback = 'animate' } = Astro.props as Props;
} }
} }
// Simulate scroll behavior of Safari and
// Chromium based browsers (Chrome, Edge, Opera, ...)
scrollTo({ left: 0, top: 0, behavior: 'instant' });
if (state?.scrollY === 0 && location.hash) { if (state?.scrollY === 0 && location.hash) {
const id = decodeURIComponent(location.hash.slice(1)); const id = decodeURIComponent(location.hash.slice(1));
state.scrollY = document.getElementById(id)?.offsetTop || 0; const elem = document.getElementById(id);
// prefer scrollIntoView() over scrollTo() because it takes scroll-padding into account
if (elem) {
state.scrollY = elem.offsetTop;
persistState(state); // first guess, later updated by scroll handler
elem.scrollIntoView(); // for Firefox, this should better be {behavior: 'instant'}
} }
if (state?.scrollY != null) { } else if (state && state.scrollY !== 0) {
scrollTo(0, state.scrollY); scrollTo(0, state.scrollY); // usings default scrollBehavior
// Overwrite erroneous updates by the scroll handler during transition
persistState(state);
} }
triggerEvent('astro:beforeload'); triggerEvent('astro:beforeload');