diff options
| -rw-r--r-- | .changeset/long-chefs-jump.md | 5 | ||||
| -rw-r--r-- | packages/astro/components/ViewTransitions.astro | 22 |
2 files changed, 15 insertions, 12 deletions
diff --git a/.changeset/long-chefs-jump.md b/.changeset/long-chefs-jump.md new file mode 100644 index 000000000..ed8f47614 --- /dev/null +++ b/.changeset/long-chefs-jump.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +The scrollend mechanism is a better way to record the scroll position compared to throttling, so we now use it whenever a browser supports it.
\ No newline at end of file diff --git a/packages/astro/components/ViewTransitions.astro b/packages/astro/components/ViewTransitions.astro index 42e8deb74..7fa336768 100644 --- a/packages/astro/components/ViewTransitions.astro +++ b/packages/astro/components/ViewTransitions.astro @@ -385,17 +385,15 @@ const { fallback = 'animate' } = Astro.props as Props; }); addEventListener('load', onPageLoad); // There's not a good way to record scroll position before a back button. - // So the way we do it is by listening to scroll and just continuously recording it. - addEventListener( - 'scroll', - throttle(() => { - // only updste history entries that are managed by us - // leave other entries alone and do not accidently add state. - if (history.state) { - persistState({ ...history.state, scrollY }); - } - }, 300), - { passive: true } - ); + // So the way we do it is by listening to scrollend if supported, and if not continuously record the scroll position. + const updateState = () => { + // only update history entries that are managed by us + // leave other entries alone and do not accidently add state. + if (history.state) { + persistState({ ...history.state, scrollY }); + } + } + if ('onscrollend' in window) addEventListener('scrollend', updateState); + else addEventListener('scroll', throttle(updateState, 300)); } </script> |