Write `scrollend` polyfill for Safari

[hasancruk]

Try and write a simple polyfill that listens for the scroll event and then emits the scrollend event after a set debounce.

Resources

• https://developer.chrome.com/blog/scrollend-a-new-javascript-event/
• https://www.npmjs.com/package/@af-utils/scrollend-polyfill
• https://github.com/nowaalex/af-utils/tree/master/packages/polyfills/scrollend-polyfill

[hasanhaja]

How is apple doing this on their own site?

https://www.apple.com/uk/macbook-pro/

[hasancruk]

Looks like they are just doing it with scroll event:

[hasancruk]

Debouncing logic:

• https://css-tricks.com/debouncing-throttling-explained-examples/
• https://github.com/nowaalex/af-utils/blob/master/packages/polyfills/scrollend-polyfill/index.ts#L61
• This is much better: https://github.com/argyleink/scrollyfills/blob/main/src/scrollend.js

[hasancruk]

A simple polyfill kinda works: https://github.com/hasancruk/cruk-carousel/commit/c2a6c1ad3ea878c9d3885f8b23bcd07afd354750

But it doesn't handle things like touch event start and stop correctly. I like the scrollyfills implementation, so I'm going to copy and paste that into the code.

[hasancruk]

That polyfill handles touch events on mobile a lot better but on desktop it's about the same. Scrollend performs way better on something like Firefox or Chrome.