Skip to content

Commit

Permalink
Mt scroll behavior (#8184)
Browse files Browse the repository at this point in the history
* The scrolling behavior of ViewTransition is now more similar to the expected browser behavior

* format

* removed browser detection
  • Loading branch information
martrapp authored Aug 22, 2023
1 parent fddd4dc commit 9142178
Show file tree
Hide file tree
Showing 2 changed files with 18 additions and 6 deletions.
5 changes: 5 additions & 0 deletions .changeset/pretty-dancers-admire.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'astro': patch
---

Fix: The scrolling behavior of ViewTransitions is now more similar to the expected browser behavior
19 changes: 13 additions & 6 deletions packages/astro/components/ViewTransitions.astro
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
const id = decodeURIComponent(location.hash.slice(1));
state.scrollY = document.getElementById(id)?.offsetTop || 0;
}
if (state?.scrollY != null) {
scrollTo(0, state.scrollY);
// Overwrite erroneous updates by the scroll handler during transition
persistState(state);
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'}
}
} else if (state && state.scrollY !== 0) {
scrollTo(0, state.scrollY); // usings default scrollBehavior
}

triggerEvent('astro:beforeload');
Expand Down

0 comments on commit 9142178

Please sign in to comment.