Wire mouse, wheel and touch input for react-horizontal-scrolling-menu: onWheel/onScroll are plain (api, event) => void callbacks, while ALL mouse/touch props (onMouseDown, onMouseUp, onMouseMove, onMouseLeave, onTouchStart, onTouchMove, onTouchEnd) are handler factories (api) => (event) => void. Covers mouse drag-to-scroll with the DragDealer pattern and dragging guard, onMouseLeave to stop drags, body-scroll locking, touchpad-vs-wheel detection, desktop swipe. Load when adding drag-to-scroll or custom wheel behavior, or when fixing clicks firing after drags or "Unable to preventDefault inside passive event listener".
Wire mouse, wheel and touch input for react-horizontal-scrolling-menu: onWheel/onScroll are plain (api, event) => void callbacks, while ALL mouse/touch props (onMouseDown, onMouseUp, onMouseMove, onMouseLeave, onTouchStart, onTouchMove, onTouchEnd) are handler factories (api) => (event) => void. Covers mouse drag-to-scroll with the DragDealer pattern and dragging guard, onMouseLeave to stop drags, body-scroll locking, touchpad-vs-wheel detection, desktop swipe. Load when adding drag-to-scroll or custom wheel behavior, or when fixing clicks firing after drags or "Unable to preventDefault inside passive event listener".
ScrollMenu has two callback shapes. Getting this wrong is the #1 input bug:
onWheel / onScroll are plain callbacks: (api, event) => void
ALL mouse and touch props (onMouseDown, onMouseUp, onMouseMove,
onMouseLeave, onTouchStart, , ) are
: . ScrollMenu invokes the
factory with the api during render and attaches the returned function as
the DOM handler.
onTouchMove
onTouchEnd
handler factories
(api) => (event) => void
All wheel/mouse/touch handlers attach to the outermost wrapper div (so they
also fire over arrows, Header and Footer); onScroll attaches to the scroll
container itself (src/index.tsx:319-347). api is the same publicApiType
object that VisibilityContext provides.
Touch devices scroll the menu natively — no touch props are needed for basic
mobile swipe. Drag-to-scroll below is the desktop "swipe" equivalent.
The complete pattern from the MouseDrag story: track pointer position, flip a
dragging flag once movement exceeds 5px, scroll the container by the delta,
clear the flag in requestAnimationFrame after mouseup so item onClick
(which fires after the drag ends) can still see it and bail, and stop the
drag via onMouseLeave so the menu does not keep following a cursor that
left it.
One menu page per wheel tick, while touchpad gestures fall through to native
horizontal scrolling. There is no standard way to distinguish the two; the
heuristic is that touchpads emit deltaX (or small deltaY), a mouse wheel
emits large deltaY only.
React attaches wheel listeners as passive, so ev.preventDefault() inside
the onWheel prop throws. Lock the page with a non-passive document-level
listener toggled on hover instead. ScrollMenu has no onMouseEnter prop, so
the toggle lives on a wrapper div.
onWheel/onScroll are plain (api, event) => void, but ALL mouse/touch
props are factories (api) => (event) => void — ScrollMenu calls the prop
with the api during render, so a plain handler receives the api object as
its "event", runs once per render, and its return value is attached as the
DOM handler, which silently does nothing useful.
<Card onClick={() =>select(id)} /> /* fires after every drag */
Correct:
<Card
onClick={() => {
if (!dragState.current.dragging) select(id);
}}
/>
// dragging is cleared inside requestAnimationFrame after mouseUp,// so it is still true when the post-drag click fires (DragDealer.dragStop)
After a drag ends the browser still dispatches a click on the item under the
cursor; guard click handlers with a dragging flag that is cleared one
animation frame after mouseup.
onScroll fires before the scroll settles (documented in the props table),
so position reads there are intermediate mid-animation values — save state
from onUpdate or poll after the transition finishes.
Source: README.md props table (onScroll fires before scroll settles); stories/SaveRestorePosition
See also
../menu-recipes/SKILL.md — drag, wheel and body-scroll recipes compose
these pointer callback shapes into features (autoplay, one item per
scroll, save/restore position).
