The scrolling problem
For touch and wheel events, the browser cannot start scrolling until it knows whether your listener will call preventDefault to cancel the scroll. If your handler is slow, scrolling janks while the browser waits.
A passive listener solves this. By passing the passive true option, you promise the handler will not call preventDefault. The browser is then free to scroll immediately on a separate thread.
How to use it
- Add the listener with an options object setting passive true.
- This is most valuable for touchstart, touchmove, and wheel events.
- If a passive handler does call preventDefault, the browser ignores it and warns in the console.
Many browsers now default touch and wheel listeners on the document to passive, so opting in explicitly documents intent and avoids surprises.
Passive listeners trade the ability to cancel for guaranteed smooth scrolling.
Key idea
A passive listener promises not to call preventDefault, letting the browser scroll immediately instead of waiting on your handler.