Mousewheel as an angular service


0103.0.15 years ago6 years agoMinified + gzip package size for angular-wheelie in KB



Build Status Dependency Status Licence Coverage Status Bower version npm version

angular-wheelie exposes a service that allows you to bind wheel events to an angular element.


Install with bower:

bower install angular-wheelie

Or with npm:

npm install angular-wheelie

Or simply download the latest release.


The pre-built files can be found in the dist/ directory. dist/angular-wheelie.min.js is minified and production-ready. Example usage:

<script src="dist/angular-wheelie.min.js"></script>

Add wheelie to your app's module dependencies:

angular.module('myapp', ['wheelie']);

And now you can use the wheelie service in your controllers, directives, services etc. Example usage in a controller:

app.controller('MyController', [ '$scope', 'wheelie', function ($scope, wheelie) {
    var target = angular.element('#someElement');
    // To listen for wheel events:
    wheelie.bind(target, {
        up: function (event) {
            console.log('wheel up on element #someElement!');
            // to prevent scrolling, use event.preventDefault();
        right: function (event) { // i.e. with a trackpad
            console.log('wheel right on element #someElement!');
        down: function (event) {
            console.log('wheel down on element #someElement!');
        left: function (event) { // i.e. with a trackpad
            console.log('wheel left on element #someElement!');
    // To unbind:
    $scope.on('$destroy', function () {

Not all callbacks are required, but at least one must be provided.

In the above example, all wheel events from #someElement will trigger one of the callbacks. To ignore wheel events from a nested element, pass the nested element's class-name as the third parameter:

app.controller('MyController', [ '$scope', 'wheelie', function ($scope, wheelie) {
    var target = angular.element('#someElement');
    var callbacks = { /* up, right, down, left callbacks */ };
    var classNameToIgnore = 'some-nested-elements';
    wheelie.bind(target, callbacks, classNameToIgnore);


Contributions are welcomed! Here are the contribution guidelines.

First clone the repository and install dependencies:

npm install

To run tests:

npm test

To lint the code:

npm run lint

To make a production build:

npm run build


The MIT License

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from