PHPackages                             backstrap/jquery-mousewheel - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. backstrap/jquery-mousewheel

ActiveComponent[Utility & Helpers](/categories/utility)

backstrap/jquery-mousewheel
===========================

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

0461—0%JavaScript

Since Apr 21Pushed 10y ago2 watchersCompare

[ Source](https://github.com/backstrap/jquery-mousewheel)[ Packagist](https://packagist.org/packages/backstrap/jquery-mousewheel)[ RSS](/packages/backstrap-jquery-mousewheel/feed)WikiDiscussions master Synced 2mo ago

READMEChangelogDependenciesVersions (1)Used By (0)

jQuery Mouse Wheel Plugin
=========================

[](#jquery-mouse-wheel-plugin)

A [jQuery](http://jquery.com/) plugin that adds cross-browser mouse wheel support with delta normalization.

#### Note: There is a [bug in Safari 9](https://github.com/jquery/jquery-mousewheel/issues/156) that prevents the plugin from working properly. See [this comment](https://github.com/jquery/jquery-mousewheel/issues/156#issuecomment-185433754) for some possible workarounds, and [watch this Webkit ticket](https://bugs.webkit.org/show_bug.cgi?id=149526) to find out if and when Apple will fix it.

[](#note-there-is-a-bug-in-safari-9-that-prevents-the-plugin-from-working-properly-see-this-comment-for-some-possible-workarounds-and-watch-this-webkit-ticket-to-find-out-if-and-when-apple-will-fix-it)

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-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](http://mousewheeldatacollector.herokuapp.com/).

### Getting the scroll distance

[](#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.

Using with [Browserify](http://browserify.org)
----------------------------------------------

[](#using-with-browserify)

Support for browserify is baked in.

```
npm install jquery-mousewheel
npm install jquery-browserify
```

In your server-side node.js code:

```
var express = require('express');
var app = express.createServer();

app.use(require('browserify')({
    require : [ 'jquery-browserify', 'jquery-mousewheel' ]
}));
```

In your browser-side javascript:

```
var $ = require('jquery-browserify');
require('jquery-mousewheel')($);
```

###  Health Score

24

—

LowBetter than 32% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity13

Limited adoption so far

Community16

Small or concentrated contributor base

Maturity41

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 71.1% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

### Community

Maintainers

![](https://www.gravatar.com/avatar/92b27de9eacb78b512e28706618b7c3fa01177e37aede68431eaadb73f1fbc09?d=identicon)[backstrap](/maintainers/backstrap)

---

Top Contributors

[![brandonaaron](https://avatars.githubusercontent.com/u/13718?v=4)](https://github.com/brandonaaron "brandonaaron (106 commits)")[![XhmikosR](https://avatars.githubusercontent.com/u/349621?v=4)](https://github.com/XhmikosR "XhmikosR (28 commits)")[![dmethvin](https://avatars.githubusercontent.com/u/157858?v=4)](https://github.com/dmethvin "dmethvin (6 commits)")[![scottgonzalez](https://avatars.githubusercontent.com/u/141167?v=4)](https://github.com/scottgonzalez "scottgonzalez (2 commits)")[![kperry42](https://avatars.githubusercontent.com/u/983573?v=4)](https://github.com/kperry42 "kperry42 (1 commits)")[![kyleguate](https://avatars.githubusercontent.com/u/2439801?v=4)](https://github.com/kyleguate "kyleguate (1 commits)")[![vitch](https://avatars.githubusercontent.com/u/9898?v=4)](https://github.com/vitch "vitch (1 commits)")[![jamesplease](https://avatars.githubusercontent.com/u/2322305?v=4)](https://github.com/jamesplease "jamesplease (1 commits)")[![can3p](https://avatars.githubusercontent.com/u/125821?v=4)](https://github.com/can3p "can3p (1 commits)")[![chriscbrock](https://avatars.githubusercontent.com/u/1761217?v=4)](https://github.com/chriscbrock "chriscbrock (1 commits)")[![adunkman](https://avatars.githubusercontent.com/u/14930?v=4)](https://github.com/adunkman "adunkman (1 commits)")

### Embed Badge

![Health badge](/badges/backstrap-jquery-mousewheel/health.svg)

```
[![Health](https://phpackages.com/badges/backstrap-jquery-mousewheel/health.svg)](https://phpackages.com/packages/backstrap-jquery-mousewheel)
```

###  Alternatives

[zhuqipeng/laravel-hprose

Hprose for Laravel

605.8k1](/packages/zhuqipeng-laravel-hprose)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)