A jQuery plugin that adds cross-browser mouse wheel support.
npm install jquery.mousewheelmousewheel event to an element.
mousewheel and unmousewheel
deltaX and deltaY properties.
deltaFactor. Multiply
deltaFactor by deltaX or deltaY to get the scroll distance that the browser
js
// 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.
$3
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.
See it in action
See the tests on Github.
Using with Browserify
Support for browserify is baked in.
`bash
npm install jquery.mousewheel
npm install jquery-browserify
`
In your server-side node.js code:
`js
var express = require('express');
var app = express.createServer();
app.use(require('browserify')({
require : [ 'jquery-browserify', 'jquery.mousewheel' ]
}));
`
In your browser-side javascript:
`js
var $ = require('jquery-browserify');
require('jquery.mousewheel')($);
``