Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

wheel-gestures

Package Overview
Dependencies
Maintainers
0
Versions
65
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

wheel-gestures

wheel gestures and momentum detection

  • 2.2.48
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
49K
decreased by-13.18%
Maintainers
0
Weekly downloads
 
Created
Source

WheelGestures

wheel gestures animation, link to docs

wheel gestures and momentum detection in the browser

npm (tag)


Installation

Install wheel-gestures using your package manager:

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

Usage

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 element
const wheelGestures = WheelGestures()

// find and observe the element the user can interact with
const element = window.document.querySelector('.slider')
wheelGestures.observe(element)

// add your event callback 
wheelGestures.on('wheel', (wheelEventState) => {
  //...
})

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:

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
}

Read more in the docs.

OS & Browsers

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

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:

Keywords

FAQs

Package last updated on 31 Aug 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc