wheel-gestures documentation

Add Callback

After creating an instance, you can add a callback using on('wheel', callback), which will be called with the a WheelEventState object.

const wheelGestures = WheelGestures()

wheelGestures.on("wheel", (wheelEventState) => {
  const {
    isStart,
    isEnding,
    axisDelta: [deltaX, deltaY, deltaZ],
    ...moreData
  } = wheelEventState
  
  // use the data...
  console.log(deltaX, deltaY, deltaZ)
})

The data provided is easily extracted using object & array destructuring.

See below in what form the data is provided.

WheelEventState

This is the TypeScript type of the WheelEventState object provided. Even if you do not use TypeScript, this might be helpful to see how the data is provided:

export type VectorXYZ = [number, number, number]

export interface WheelEventState {
  isStart: boolean
  isMomentum: boolean
  isEnding: boolean
  isMomentumCancel: boolean
  axisDelta: VectorXYZ
  axisVelocity: VectorXYZ
  axisMovement: VectorXYZ
  axisMovementProjection: VectorXYZ
  event: WheelEvent | WheelEventData
  previous?: WheelEventState
}

Momentum/inertia detection isMomentum

Tested with all current versions of all major browsers (Chrome, Firefox, Safari, Edge)

  • macOS + Magic Mouse & Magic Trackpad
  • Windows 10 + Precision Touchpads (PTP)

Remove Callback

To cleanup you can use one of the following methods to remove the callback:

wheelGestures.on("wheel", callback)
wheelGestures.off("wheel", callback)

// alternative:
const off = wheelGestures.on("wheel", callback)
off()