Repository files navigation

wheel gestures and momentum detection in the browser

Install wheel-gestures using your package manager:

yarn add wheel-gestures# OR npm install wheel-gestures

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

import{WheelGestures}from'wheel-gestures'// create an instance per elementconstwheelGestures=WheelGestures()// find and observe the element the user can interact withconstelement=window.document.querySelector('.slider')wheelGestures.observe(element)// add your event callbackwheelGestures.on('wheel',(wheelEventState)=>{//...})

There areoptions to customize the behaviour.

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:

exporttypeVectorXYZ=[number,number,number]exportinterfaceWheelEventState{isStart:booleanisMomentum:booleanisEnding:booleanisMomentumCancel:booleanaxisDelta:VectorXYZaxisVelocity:VectorXYZaxisMovement:VectorXYZaxisMovementProjection:VectorXYZevent:WheelEvent|WheelEventDataprevious?:WheelEventState}

Read more in thedocs.

OS & Browsers

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

Other people also thought that it might be helpful for some interactions to be able to distinguish between user initiated wheel events and the ones that are triggered by inertia scroll, but none of the other known libraries delivered results in the precision I needed, so I developed my own solution. Honourable mentions:

• https://github.com/promo/wheel-indicator
• https://github.com/d4nyll/lethargy