WheelGestures

🚧 Disclaimer

This project is a fork of https://github.com/xiel/wheel-gestures. It solely exists to fix some problems with type imports. The original package seems to be abandoned, thus the fork and republish.

Installation

Install @maas/wheel-gestures using your package manager:

1pnpm install @maas/wheel-gestures # OR npm install @maas/wheel-gestures

Usage

Import and create an instance of WheelGestures and then add the element you want to observe.

1import { WheelGestures } from '@maas/wheel-gestures'
2
3// create an instance per element
4const wheelGestures = WheelGestures()
5
6// find and observe the element the user can interact with
7const element = window.document.querySelector('.slider')
8wheelGestures.observe(element)
9
10// add your event callback
11wheelGestures.on('wheel', (wheelEventState) => {
12  //...
13})

There are options to customize the behaviour.

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:

1export type VectorXYZ = [number, number, number]
2
3export interface WheelEventState {
4  isStart: boolean
5  isMomentum: boolean
6  isEnding: boolean
7  isMomentumCancel: boolean
8  axisDelta: VectorXYZ
9  axisVelocity: VectorXYZ
10  axisMovement: VectorXYZ
11  axisMovementProjection: VectorXYZ
12  event: WheelEvent | WheelEventData
13  previous?: WheelEventState
14}

Read more in the docs.

OS & Browsers

• Mac OS (Chrome, Firefox, Safari, Edge), Magic Mouse, Magic Trackpad
• Windows (Chrome, Firefox, Edge), Microsoft Precision Touchpads