Smooth Scrolling

Modern browsers perform page scrolling in a separate thread to keep it buttery smooth. However, there's a problem: when you add a listener for wheel or touchstart, the browser must pause and wait for your JavaScript to finish executing before it can scroll. Why? Because it needs to check whether you called event.preventDefault() to block the scroll.

This waiting causes noticeable lag, especially on mobile devices.

The Solution: The passive Flag

By setting passive: true, you make a " promise " to the browser that your handler will never call preventDefault(). The browser believes you and can start scrolling immediately without waiting.

window.addEventListener('touchstart', handleTouchStart, {
  passive: true // Promise: we will NOT cancel scrolling
});

window.addEventListener('wheel', trackScrollDepth, {
  passive: true // Analytics tracking — no need to cancel scroll
});