\n wheel gestures and momentum detection in the browser\n
\n\n
\n \n
\n\n\n\n## Installation\n\nInstall wheel-gestures using your package manager:\n\n```sh\nyarn add wheel-gestures # OR npm install wheel-gestures\n```\n\n## Usage \n\nImport and create an instance of WheelGestures and then add the element you want to observe.\n\n````TypeScript\nimport { WheelGestures } from 'wheel-gestures'\n\n// create an instance per element\nconst wheelGestures = WheelGestures()\n\n// find and observe the element the user can interact with\nconst element = window.document.querySelector('.slider')\nwheelGestures.observe(element)\n\n// add your event callback \nwheelGestures.on('wheel', (wheelEventState) => {\n //...\n})\n````\n\nThere are [options](https://wheel-gestures.xiel.dev/docs/options/) to customize the behaviour.\n\n#### WheelEventState\n\nThis 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:\n\n````TypeScript\nexport type VectorXYZ = [number, number, number]\n\nexport interface WheelEventState {\n isStart: boolean\n isMomentum: boolean\n isEnding: boolean\n isMomentumCancel: boolean\n axisDelta: VectorXYZ\n axisVelocity: VectorXYZ\n axisMovement: VectorXYZ\n axisMovementProjection: VectorXYZ\n event: WheelEvent | WheelEventData\n previous?: WheelEventState\n}\n````\n\nRead more in the [docs](https://wheel-gestures.xiel.dev).\n\nWhen an event exposes a boolean `WheelEvent.momentum`, that value determines\n`isMomentum`. Browsers without it continue to use the existing momentum detection.\nRecorded events passed to `feedWheel` can also include the optional `momentum` field.\n\n**OS & Browsers**\n\n- Mac OS (Chrome, Firefox, Safari, Edge), Magic Mouse, Magic Trackpad\n- Windows (Chrome, Firefox, Edge), Microsoft Precision Touchpads\n\n#### Prior Art\n\nOther 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:\n\n- https://github.com/promo/wheel-indicator\n- https://github.com/d4nyll/lethargy\n","readmeFilename":"README.md"}
![\"wheel](\"./wheelGestures.gif\")
\n \n![\"npm](\"https://img.shields.io/npm/v/wheel-gestures/latest.svg\")
\n