Event Bubbling & Capturing

window.addEventListener('scroll', () => {
  requestAnimationFrame(() => {
    // Handle scroll
  });
}, { passive: true });

To cancel the scroll event
To improve animation smoothness
Combining requestAnimationFrame with a passive scroll listener provides optimal performance for scroll-based animations or calculations. The passive flag allows the browser to scroll immediately without waiting for JavaScript, while requestAnimationFrame ensures that your scroll handling code runs during the next animation frame, preventing jank and ensuring smooth performance. This pattern is particularly important for implementing infinite scroll, scroll-based animations, or scroll-based loading features.
To prevent event bubbling
To capture the event first