menu-interactions

Pointer, Wheel and Touch Interactions

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, onTouchMove, onTouchEnd) are handler factories: (api) => (event) => void. ScrollMenu invokes the factory with the api during render and attaches the returned function as the DOM handler.

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.

Setup

Both shapes wired on a minimal menu:

import React from 'react';
import {
  ScrollMenu,
  VisibilityContext,
  type publicApiType,
} from 'react-horizontal-scrolling-menu';
import 'react-horizontal-scrolling-menu/dist/styles.css';

function Card({ itemId }: { itemId: string }) {
  const api = React.useContext<publicApiType>(VisibilityContext);
  const visible = api.useIsVisible(itemId, true);
  return <div style={{ width: 160, opacity: visible ? 1 : 0.5 }}>{itemId}</div>;
}

// Plain shape — (api, event) => void
const onWheel = (api: publicApiType, ev: React.WheelEvent): void => {
  if (ev.deltaY < 0) api.scrollNext();
  else api.scrollPrev();
};

// Factory shape — (api) => (event) => void
const onMouseDown =
  (_api: publicApiType) =>
  (ev: React.MouseEvent): void => {
    ev.preventDefault(); // block native image/link drag inside items
  };

const ids = ['a', 'b', 'c', 'd', 'e', 'f'];

export function Menu() {
  return (
    <ScrollMenu onWheel={onWheel} onMouseDown={onMouseDown}>
      {ids.map((id) => (
        <Card itemId={id} key={id} />
      ))}
    </ScrollMenu>
  );
}