v151 · input · practical use case
Precision zoom controller
Maps, CAD tools, data canvases, and timelines often bind wheel input to zoom. A trackpad fling can keep emitting events after the finger lifts, overshooting the intended level. WheelEvent.momentum lets the tool apply, dampen, or ignore that inertial tail without guessing from timers.
Checking WheelEvent.prototype.momentum…
Direct wheel events always zoom. The selected policy only changes events where the browser reports momentum === true.
100%zoom
0direct events
0momentum events
0ignored/dampened
Recent input
- Focus the canvas and use a wheel or trackpad.
Why this is useful
- Map and diagram zoom: stop inertial overshoot after a deliberate pinch-like wheel gesture.
- Media and data timelines: scrub while the user is active, then avoid drifting past the chosen frame or point.
- Expensive rendering: preview during momentum but defer a high-quality commit until direct input resumes or the gesture settles.
- Nested scrollers: make an informed hand-off between a zoomable canvas and the surrounding document.
Core decision
canvas.addEventListener("wheel", (event) => {
if (event.momentum && policy === "ignore") return;
const factor = event.momentum && policy === "dampen" ? 0.2 : 1;
zoomBy(event.deltaY * factor);
}, { passive: false });references
implementation reference
Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗