A better, smoother, more performant onscroll event interface based on the concepts from this html5rocks tutorial. It uses requestAnimationFrame plus debouncing for performance and mobile-compatibility (thanks to the touchmove event), giving you a fighting chance to achieve the hallowed 60fps of lore with your scroll-listening UI.
The module is ESM-only and exports a single default onscrolling function:
The function to call on a scroll event with a { scrollX: number; scrollY: number } payload object. In this default version, the module will only invoke the listener when the page has been scrolled vertically.
The function to call on a scroll event with a { scrollX: number; scrollY: number } payload object. The listener is invoked when the page is scrolled in any of the direction specified in the options object (only once per event).
The scroll axis or axes to monitor. x is an alias for horizontal, and y is an alias for vertical. If neither horizontal nor vertical are true, vertical is used as the default. To listen for any scroll event in any direction, set both horizontal and vertical to true.
The onscrolling function returns a cleanup function that takes no arguments and is used to remove the passed-in scroll event listener.
None.
Out of the box, onscrolling uses requestAnimationFrame, which is only available in IE10+. For older browsers, your scroll watchers simply won’t run. To add compatibility for those browsers, just include a requestAnimationFrame polyfill.
Tests use vitest + happy-dom, and can be run with yarn test.
- Add optional param to specify an object other than
windowto monitor for scroll events - Expose
measureandmutatefunctions to attach handlers specifically to the measuring (read) or mutating (write) portion of each cycle to minimize layout calculations
Note: This package was formerly known as jank-free-onscroll