A touchmove listener added on document calls event.preventDefault() to stop the page scrolling, but the page scrolls anyway and the console warns that preventDefault cannot be used inside a passive listener. Why, and what are the options?

## The problem the default solves A touch or wheel gesture is *scroll-blocking*: the browser cannot start scrolling until it knows nobody is going to cancel it. Scrolling normally happens on the compositor thread and can keep up with the finger even while JavaScript is busy — but only if the compositor is allowed to proceed without asking. If the page has registered a `touchmove` or `wheel` listener that *might* call `preventDefault()`, the compositor must hand the event to the main thread, wait for the listener to return, and only then scroll. On a page with long tasks, that wait is visible as a stutter at the start of every scroll. The `passive` listener option is the promise that removes the wait: `{ passive: true }` declares "this handler will never cancel the default", so the browser scrolls immediately and runs the handler whenever it can. ## The default that surprises people Because an enormous number of pages had analytics or carousel listeners on the document that never cancelled anything, browsers changed the *default* rather than waiting for every site to add the option. Chrome 56 made `touchstart` and `touchmove` passive by default, and Chrome 73 did the same for `wheel` and `mousewheel`; Firefox and Safari ship equivalent behaviour today. The scope is the important detail, and it is narrow: the default flips **only when the listener target is `window`, `document`, `document.documentElement` or `document.body`**. Register the identical listener on a `<div>` and it is non-passive as before, and `preventDefault()` works. That is why the same helper function behaves differently depending on which node it was attached to — the single most confusing symptom of this rule. Inside a passive listener, cancellation is simply inert: ```js document.addEventListener('touchmove', (e) => { e.preventDefault(); // ignored console.log(e.defaultPrevented); // false }); // console: Unable to preventDefault inside passive event listener invocation. ``` ## Option one: opt back in ```js document.addEventListener('touchmove', onTouchMove, { passive: false }); ``` This restores cancellation, and restores the cost: the browser must now consult your handler before it can scroll, so keep the handler short and free of layout reads. Reserve it for cases where the decision to cancel genuinely depends on runtime state — a pull-to-refresh that only blocks when the container is already at scroll position zero, for example. Note that `{ passive: true }` is not a general performance win to sprinkle everywhere: it is meaningful only for scroll-blocking event types. Adding it to a `click` listener changes nothing. ## Option two: say it in CSS instead The declarative lever is the `touch-action` property, which tells the browser up front which gestures it may handle on an element: ```css .canvas { touch-action: none; } /* the app owns all gestures here */ .carousel { touch-action: pan-y; } /* vertical page scroll stays with the browser */ ``` Because it is known before the gesture starts, there is no main-thread round trip at all, and pointer events keep flowing to your handler instead of being cut off with `pointercancel` when the browser claims the gesture for panning. For a custom drag, slider or drawing surface this is the correct tool; `preventDefault()` in a non-passive `touchmove` is the fallback for decisions that can only be made mid-gesture. `overscroll-behavior: contain` is the related lever for the narrower problem of scroll chaining and pull-to-refresh. ## Wheel specifics `wheel` carries `deltaX`, `deltaY` and `deltaZ` plus `deltaMode`, which says what unit those deltas are in: `WheelEvent.DOM_DELTA_PIXEL` (0), `DOM_DELTA_LINE` (1) or `DOM_DELTA_PAGE` (2). Code that assumes pixels breaks on devices reporting lines. Trackpad pinch-zoom is also reported as a `wheel` event with `ctrlKey` set to true — the standard way a zoomable canvas distinguishes pinch from scroll. Cancelling a wheel to implement custom zoom requires the same `{ passive: false }` opt-in when the listener sits on one of the root targets. ## What to say in an interview Name the three parts: the default applies to `touchstart`, `touchmove` and `wheel`; only on the four root targets; and it exists because the compositor should not have to wait on the main thread to start a scroll. Then give both remedies — `{ passive: false }` for a runtime decision, `touch-action` for a static one — and say which you would prefer and why.