From e78aee8a63a3319a7e4780fff7c74b591abac415 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jacob=20Gro=C3=9F?= Date: Sat, 19 Aug 2023 13:15:30 +0200 Subject: [PATCH 1/3] feat(ViewTransitions): use `scrollend` instead of `scroll` where supported The [scrollend](https://developer.chrome.com/blog/scrollend-a-new-javascript-event/#event-details) mechanism seems like a better way to record the scroll position compared to throttling, so we could use it whenever a browser supports it. Additionally, I've removed the `{passive}` flag from the `scroll` event, as it does nothing ([source](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener?retiredLocale=de#improving_scrolling_performance_with_passive_listeners:~:text=You%20don%27t%20need%20to%20worry%20about%20the%20value%20of%20passive%20for%20the%20basic%20scroll%20event.%20Since%20it%20can%27t%20be%20canceled%2C%20event%20listeners%20can%27t%20block%20page%20rendering%20anyway.)). --- .../astro/components/ViewTransitions.astro | 20 +++++++++---------- 1 file changed, 9 insertions(+), 11 deletions(-) diff --git a/packages/astro/components/ViewTransitions.astro b/packages/astro/components/ViewTransitions.astro index 4b7a465517ff..879436108f68 100644 --- a/packages/astro/components/ViewTransitions.astro +++ b/packages/astro/components/ViewTransitions.astro @@ -342,16 +342,14 @@ const { fallback = 'animate' } = Astro.props as Props; addEventListener('load', onload); // 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 } - ); + const updateState = () => { + // 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 }); + } + } + if ('onscrollend' in window) addEventListener('scrollend', updateState); + else addEventListener('scroll', throttle(updateState, 300)); } From 696219b70ae0f898dded587bdbcfd98a73e07109 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jacob=20Gro=C3=9F?= Date: Wed, 23 Aug 2023 13:40:30 +0200 Subject: [PATCH 2/3] Create long-chefs-jump.md --- .changeset/long-chefs-jump.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/long-chefs-jump.md diff --git a/.changeset/long-chefs-jump.md b/.changeset/long-chefs-jump.md new file mode 100644 index 000000000000..ed8f47614bfb --- /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 From ceb4253090f22dff5a94dc172b50e93a1c59298d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jacob=20Gro=C3=9F?= Date: Wed, 23 Aug 2023 13:42:50 +0200 Subject: [PATCH 3/3] fix typo / update comment --- packages/astro/components/ViewTransitions.astro | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/astro/components/ViewTransitions.astro b/packages/astro/components/ViewTransitions.astro index 879436108f68..3f510e8769bd 100644 --- a/packages/astro/components/ViewTransitions.astro +++ b/packages/astro/components/ViewTransitions.astro @@ -341,9 +341,9 @@ const { fallback = 'animate' } = Astro.props as Props; }); addEventListener('load', onload); // 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. + // So the way we do it is by listening to scrollend if supported, and if not continuously record the scroll position. const updateState = () => { - // only updste history entries that are managed by us + // 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 });