• Stars
    star
    3,897
  • Rank 11,235 (Top 0.3 %)
  • Language
    JavaScript
  • License
    Other
  • Created about 16 years ago
  • Updated 5 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A jQuery plugin that adds cross-browser mouse wheel support.

jQuery Mouse Wheel Plugin

A jQuery plugin that adds cross-browser mouse wheel support with delta normalization.

In order to use the plugin, simply bind the mousewheel event to an element.

It also provides two helper methods called mousewheel and unmousewheel that act just like other event helper methods in jQuery.

The event object is updated with the normalized deltaX and deltaY properties. In addition there is a new property on the event object called deltaFactor. Multiply the deltaFactor by deltaX or deltaY to get the scroll distance that the browser has reported.

Here is an example of using both the bind and helper method syntax:

// using on
$('#my_elem').on('mousewheel', function(event) {
    console.log(event.deltaX, event.deltaY, event.deltaFactor);
});

// using the event helper
$('#my_elem').mousewheel(function(event) {
    console.log(event.deltaX, event.deltaY, event.deltaFactor);
});

The old behavior of adding three arguments (delta, deltaX, and deltaY) to the event handler is now deprecated and will be removed in later releases.

The Deltas...

The combination of browsers, operating systems, and devices offer a huge range of possible delta values. In fact if the user uses a trackpad and then a physical mouse wheel the delta values can differ wildly. This plugin normalizes those values so you get a whole number starting at +-1 and going up in increments of +-1 according to the force or acceleration that is used. This number has the potential to be in the thousands depending on the device. Check out some of the data collected from users here.

Getting the scroll distance

In some use-cases we prefer to have the normalized delta but in others we want to know how far the browser should scroll based on the users input. This can be done by multiplying the deltaFactor by the deltaX or deltaY event property to find the scroll distance the browser reported.

The deltaFactor property was added to the event object in 3.1.5 so that the actual reported delta value can be extracted. This is a non-standard property.

Building the code in the repo

$ git clone [email protected]:jquery/jquery-mousewheel.git
$ cd jquery-mousewheel/
$ npm install
$ npm run build
$ npm run karma

The unit tests run by karma are very basic sanity checks; improvements welcome. To fully test the plugin, load test/index.html in each supported browser and follow the instructions at the top of the file after the unit tests finish.

More Repositories

1

jquery

jQuery JavaScript Library
JavaScript
59,064
star
2

jquery-ui

The official jQuery user interface library.
JavaScript
11,252
star
3

esprima

ECMAScript parsing infrastructure for multipurpose analysis
TypeScript
7,020
star
4

sizzle

A sizzlin' hot selector engine.
JavaScript
6,278
star
5

jquery-migrate

A development tool to help migrate away from APIs and features that have been or will be removed from jQuery core
JavaScript
2,006
star
6

jquery-color

jQuery plugin for color manipulation and animation support.
JavaScript
1,639
star
7

testswarm

Distributed continuous integration testing for JavaScript.
PHP
968
star
8

learn.jquery.com

jQuery Learning Center web site content
JavaScript
924
star
9

api.jquery.com

API documentation for jQuery Core
HTML
318
star
10

jquery-wp-content

WordPress themes and plugins for the jQuery sites
PHP
252
star
11

jquery-simulate

jQuery Event Unit Testing Helpers
JavaScript
173
star
12

themeroller.jquerymobile.com

ThemeRoller site for jQuery Mobile
CSS
140
star
13

jqueryui.com

jQuery UI web site content
HTML
133
star
14

jquery-dist

Distribution repo for jQuery Core releases
JavaScript
102
star
15

download.jqueryui.com

Download Builder for jQuery UI
JavaScript
86
star
16

jquery.com

jQuery web site content
HTML
77
star
17

api.jqueryui.com

API documentation for jQuery UI
HTML
70
star
18

codeorigin.jquery.com

jQuery CDN
JavaScript
57
star
19

jquerymobile.com

jQuery Mobile web site content
HTML
54
star
20

api.jquerymobile.com

API documentation for jQuery Mobile
HTML
54
star
21

jquery.org

jQuery Foundation web site content
HTML
51
star
22

gsoc

Home for the jQuery Foundations ideas list for Google Summer of Code 2015
41
star
23

grunt-jquery-content

XSLT
38
star
24

typesense-minibar

Fast 2kB autocomplete search bar. Alternative to Algolia DocSearch, InstantSearch, and autocomplete-js.
JavaScript
36
star
25

eslint-config-jquery

jQuery's eslint config, enforcing the jQuery styleguide
JavaScript
32
star
26

meetings.jquery.org

Calendar and minutes of public jQuery team meetings
JavaScript
27
star
27

testswarm-browserstack

Integration layer between TestSwarm and BrowserStack
JavaScript
26
star
28

contribute.jquery.org

Developer documentation common to jQuery projects
HTML
25
star
29

jquery-release

Release automation script for jQuery projects
JavaScript
24
star
30

demos.jquerymobile.com

jQuery Mobile demo site
HTML
21
star
31

2012-dev-summit

Information regarding the 2012 Developer Summit in DC
15
star
32

jquery-license

jQuery Foundation License Verification
JavaScript
12
star
33

2015-developer-summit

a sandbox site for making mistakes
HTML
10
star
34

globalizejs.com

Globalize web site content
JavaScript
10
star
35

irc.jquery.org

jQuery Foundation IRC channels and logs site content
HTML
9
star
36

brand.jquery.org

Information on jQuery's branding
HTML
8
star
37

events.jquery.org

jQuery Events & Conferences web site content
HTML
8
star
38

node-amd-builder

jQuery Mobile download builder, a Node.js service
JavaScript
7
star
39

jquery.github.io

HTML
7
star
40

infrastructure-puppet

Puppet configuration for jQuery Infrastructure servers.
HTML
6
star
41

ci-management

Shell
5
star
42

jquery-compat-dist

Distribution repo for jQuery Core Compat releases
JavaScript
5
star
43

healthyweb.org

Check any website for the latest version of jQuery
Svelte
4
star
44

content

Content Team
3
star
45

blog.jquery.com-theme

Themes for blogs during transition period to jquery-wp-content.
CSS
2
star
46

node-packager

Build a package for your library or application on the fly on Node.js
JavaScript
2
star
47

podcast.jquery.com

HTML
1
star