useMouseWheelDelta

About

useMouseWheelDelta reports the latest native WheelEvent.deltaY and a velocity derived from the time since the previous wheel event. The delta is not a difference between two deltaY values.

Example

import { useMouseWheelDelta } from "rooks";

export default function WheelMotion() {
  const { delta, velocity } = useMouseWheelDelta();

  return (
    <p>
      Latest vertical wheel delta: {delta}; velocity: {velocity.toFixed(2)}
      units/ms
    </p>
  );
}

Parameters

This hook has no parameters.

Return value

It returns { delta, velocity }. delta is the latest event's deltaY; velocity is deltaY / elapsedMilliseconds.

Behavior and lifecycle

The initial snapshot is { delta: 0, velocity: 0 }. The first wheel event reports its actual deltaY with zero velocity. Later events use their timestamp difference; a zero time difference produces zero velocity. Values persist until another event. The document listener is removed on unmount.

Compatibility and accessibility

The server snapshot is all zeros. The delta unit depends on the event's deltaMode and may represent pixels, lines, or pages; this hook does not return deltaMode or normalize units. Wheel input is not available to every user, so keep keyboard and touch alternatives.

Related

• useMouseMoveDelta reports pointer movement and velocity.