Mt scroll behavior (#8184)
* The scrolling behavior of ViewTransition is now more similar to the expected browser behavior * format * removed browser detection
This commit is contained in:
parent
fddd4dc71a
commit
9142178b11
2 changed files with 18 additions and 6 deletions
5
.changeset/pretty-dancers-admire.md
Normal file
5
.changeset/pretty-dancers-admire.md
Normal file
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
'astro': patch
|
||||
---
|
||||
|
||||
Fix: The scrolling behavior of ViewTransitions is now more similar to the expected browser behavior
|
|
@ -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');
|
||||
|
|
Loading…
Reference in a new issue