michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

feat(ViewTransitions): use scrollend instead of scroll where supported (#8156)

Browse source 
* 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.)).

* Create long-chefs-jump.md

* fix typo / update comment
This commit is contained in:
Jacob Groß 2023-08-25 14:43:52 +02:00 committed by GitHub
parent a35c21cfc8
commit acf652fc1d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 15 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/long-chefs-jump.md Normal file
View file

@ -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.

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

@ -385,17 +385,15 @@ const { fallback = 'animate' } = Astro.props as Props;
}); });
addEventListener('load', onPageLoad); addEventListener('load', onPageLoad);
// There's not a good way to record scroll position before a back button. // 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.
addEventListener( const updateState = () => {
'scroll', // only update history entries that are managed by us
throttle(() => {
// only updste history entries that are managed by us
// leave other entries alone and do not accidently add state. // leave other entries alone and do not accidently add state.
if (history.state) { if (history.state) {
persistState({ ...history.state, scrollY }); persistState({ ...history.state, scrollY });
} }
}, 300), }
{ passive: true } if ('onscrollend' in window) addEventListener('scrollend', updateState);
); else addEventListener('scroll', throttle(updateState, 300));
} }
</script> </script>