Remove jquery-mousewheel dependencies.

Tested under OS X.

Gruntfile.js

@@ -21,11 +21,7 @@ module.exports = function (grunt) {
       },
       min: {
         files: {
-          'min/perfect-scrollbar.min.js': ['src/perfect-scrollbar.js'],
+          'min/perfect-scrollbar.min.js': ['src/perfect-scrollbar.js']
-          'min/perfect-scrollbar.with-mousewheel.min.js': [
-            'src/perfect-scrollbar.js',
-            'src/jquery.mousewheel.js'
-          ]
         }
       }
     },

README.md

@@ -75,7 +75,7 @@ perfect-scrollbar supports optional parameters.
 
 ### wheelSpeed
 The scroll speed applied to mousewheel event.  
-**Default: 10**
+**Default: 1**
 
 ### wheelPropagation
 If this option is true, when the scroll reach the end of the side, mousewheel event will be propagated to parent element.  
@@ -167,13 +167,6 @@ $("#Demo").perfectScrollbar('update');
 
 Also you can get the informations about how to use the plugin from example codes in the `examples` directory of the source tree.
 
-Very helpful friends
---------------------
-
-perfect-scrollbar supports [jquery-mousewheel](https://github.com/brandonaaron/jquery-mousewheel). If you want to use mousewheel features, please include jquery-mousewheel before using perfect-scrollbar.
-
-If you want to make this plugin's update function more responsive, [jquery-resize](https://github.com/cowboy/jquery-resize) can be helpful.
-
 Contribution
 ------------
 

examples/options-default.html

@@ -5,7 +5,6 @@
     <title>perfect-scrollbar example</title>
       <link href="../src/perfect-scrollbar.css" rel="stylesheet">
       <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
-      <script src="../src/jquery.mousewheel.js"></script>
       <script src="../src/perfect-scrollbar.js"></script>
       <style>
         .contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: hidden; }

examples/options-minScrollbarLength.html

@@ -5,7 +5,6 @@
     <title>perfect-scrollbar example</title>
         <link href="../src/perfect-scrollbar.css" rel="stylesheet">
         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
-        <script src="../src/jquery.mousewheel.js"></script>
         <script src="../src/perfect-scrollbar.js"></script>
         <style>
           .contentHolder { position:relative; margin:0px auto; padding:0px; width: 640px; height: 360px; overflow: hidden; }

examples/options-suppressScrollAxis.html

@@ -5,7 +5,6 @@
     <title>perfect-scrollbar example</title>
       <link href="../src/perfect-scrollbar.css" rel="stylesheet">
       <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
-      <script src="../src/jquery.mousewheel.js"></script>
       <script src="../src/perfect-scrollbar.js"></script>
       <style>
         .contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: hidden; }

examples/options-useBothWheelAxes.html

@@ -5,7 +5,6 @@
     <title>perfect-scrollbar example</title>
         <link href="../src/perfect-scrollbar.css" rel="stylesheet">
         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
-        <script src="../src/jquery.mousewheel.js"></script>
         <script src="../src/perfect-scrollbar.js"></script>
         <style>
           .contentHolder { position:relative; margin:0px auto; padding:0px; width: 640px; height: 360px; overflow: hidden; }

examples/options-wheelPropagation.html

@@ -5,7 +5,6 @@
     <title>perfect-scrollbar example</title>
       <link href="../src/perfect-scrollbar.css" rel="stylesheet">
       <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
-      <script src="../src/jquery.mousewheel.js"></script>
       <script src="../src/perfect-scrollbar.js"></script>
       <style>
         .contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: hidden; }

examples/options-wheelSpeed.html

@@ -5,7 +5,6 @@
     <title>perfect-scrollbar example</title>
       <link href="../src/perfect-scrollbar.css" rel="stylesheet">
       <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
-      <script src="../src/jquery.mousewheel.js"></script>
       <script src="../src/perfect-scrollbar.js"></script>
       <style>
         .contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: hidden; }
@@ -16,23 +15,23 @@
       jQuery(document).ready(function ($) {
         "use strict";
         $('#Default').perfectScrollbar();
-        $('#FastWheelSpeed').perfectScrollbar({wheelSpeed:100});
+        $('#FastWheelSpeed').perfectScrollbar({wheelSpeed:10});
-        $('#SlowWheelSpeed').perfectScrollbar({wheelSpeed:1});
+        $('#SlowWheelSpeed').perfectScrollbar({wheelSpeed:0.1});
       });
     </script>
   </head>
   <body>
-    <h1 style="text-align:center">Default; wheelSpeed:10</h1>
+    <h1 style="text-align:center">Default; wheelSpeed:1</h1>
     <div id="Default" class="contentHolder">
       <div class="content">
       </div>
     </div>
-    <h1 style="text-align:center">Fast: wheelSpeed:100</h1>
+    <h1 style="text-align:center">Fast: wheelSpeed:10</h1>
     <div id="FastWheelSpeed" class="contentHolder">
       <div class="content">
       </div>
     </div>
-    <h1 style="text-align:center">Slow: wheelSpeed:1</h1>
+    <h1 style="text-align:center">Slow: wheelSpeed:0.1</h1>
     <div id="SlowWheelSpeed" class="contentHolder">
       <div class="content">
       </div>

examples/reach-the-end-callback.html

@@ -6,7 +6,6 @@
     <title>perfect-scrollbar example</title>
     <link href="../src/perfect-scrollbar.css" rel="stylesheet">
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
-    <script src="../src/jquery.mousewheel.js"></script>
     <script src="../src/perfect-scrollbar.js"></script>
     <style>
       #description {

examples/rtl.html

@@ -5,7 +5,6 @@
     <title>perfect-scrollbar example</title>
       <link href="../src/perfect-scrollbar.css" rel="stylesheet">
       <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
-      <script src="../src/jquery.mousewheel.js"></script>
       <script src="../src/perfect-scrollbar.js"></script>
       <style>
         .contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: hidden; }

examples/scrollbars-on-the-opposite-side.html

@@ -5,7 +5,6 @@
     <title>perfect-scrollbar example</title>
       <link href="../src/perfect-scrollbar.css" rel="stylesheet">
       <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
-      <script src="../src/jquery.mousewheel.js"></script>
       <script src="../src/perfect-scrollbar.js"></script>
       <style>
         .contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: hidden; }

examples/text-content.html

@@ -6,7 +6,6 @@
     <title>perfect-scrollbar example</title>
     <link href="../src/perfect-scrollbar.css" rel="stylesheet">
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
-    <script src="../src/jquery.mousewheel.js"></script>
     <script src="../src/perfect-scrollbar.js"></script>
     <style>
       #description {

src/jquery.mousewheel.js

@@ -1,201 +0,0 @@
-/*! Copyright (c) 2013 Brandon Aaron (http://brandon.aaron.sh)
- * Licensed under the MIT License (LICENSE.txt).
- *
- * Version: 3.1.9
- *
- * Requires: jQuery 1.2.2+
- */
-
-(function (factory) {
-    if ( typeof define === 'function' && define.amd ) {
-        // AMD. Register as an anonymous module.
-        define(['jquery'], factory);
-    } else if (typeof exports === 'object') {
-        // Node/CommonJS style for Browserify
-        module.exports = factory;
-    } else {
-        // Browser globals
-        factory(jQuery);
-    }
-}(function ($) {
-
-    var toFix  = ['wheel', 'mousewheel', 'DOMMouseScroll', 'MozMousePixelScroll'],
-        toBind = ( 'onwheel' in document || document.documentMode >= 9 ) ?
-                    ['wheel'] : ['mousewheel', 'DomMouseScroll', 'MozMousePixelScroll'],
-        slice  = Array.prototype.slice,
-        nullLowestDeltaTimeout, lowestDelta;
-
-    if ( $.event.fixHooks ) {
-        for ( var i = toFix.length; i; ) {
-            $.event.fixHooks[ toFix[--i] ] = $.event.mouseHooks;
-        }
-    }
-
-    var special = $.event.special.mousewheel = {
-        version: '3.1.9',
-
-        setup: function() {
-            if ( this.addEventListener ) {
-                for ( var i = toBind.length; i; ) {
-                    this.addEventListener( toBind[--i], handler, false );
-                }
-            } else {
-                this.onmousewheel = handler;
-            }
-            // Store the line height and page height for this particular element
-            $.data(this, 'mousewheel-line-height', special.getLineHeight(this));
-            $.data(this, 'mousewheel-page-height', special.getPageHeight(this));
-        },
-
-        teardown: function() {
-            if ( this.removeEventListener ) {
-                for ( var i = toBind.length; i; ) {
-                    this.removeEventListener( toBind[--i], handler, false );
-                }
-            } else {
-                this.onmousewheel = null;
-            }
-        },
-
-        getLineHeight: function(elem) {
-            return parseInt($(elem)['offsetParent' in $.fn ? 'offsetParent' : 'parent']().css('fontSize'), 10);
-        },
-
-        getPageHeight: function(elem) {
-            return $(elem).height();
-        },
-
-        settings: {
-            adjustOldDeltas: true
-        }
-    };
-
-    $.fn.extend({
-        mousewheel: function(fn) {
-            return fn ? this.bind('mousewheel', fn) : this.trigger('mousewheel');
-        },
-
-        unmousewheel: function(fn) {
-            return this.unbind('mousewheel', fn);
-        }
-    });
-
-
-    function handler(event) {
-        var orgEvent   = event || window.event,
-            args       = slice.call(arguments, 1),
-            delta      = 0,
-            deltaX     = 0,
-            deltaY     = 0,
-            absDelta   = 0;
-        event = $.event.fix(orgEvent);
-        event.type = 'mousewheel';
-
-        // Old school scrollwheel delta
-        if ( 'detail'      in orgEvent ) { deltaY = orgEvent.detail * -1;      }
-        if ( 'wheelDelta'  in orgEvent ) { deltaY = orgEvent.wheelDelta;       }
-        if ( 'wheelDeltaY' in orgEvent ) { deltaY = orgEvent.wheelDeltaY;      }
-        if ( 'wheelDeltaX' in orgEvent ) { deltaX = orgEvent.wheelDeltaX * -1; }
-
-        // Firefox < 17 horizontal scrolling related to DOMMouseScroll event
-        if ( 'axis' in orgEvent && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) {
-            deltaX = deltaY * -1;
-            deltaY = 0;
-        }
-
-        // Set delta to be deltaY or deltaX if deltaY is 0 for backwards compatabilitiy
-        delta = deltaY === 0 ? deltaX : deltaY;
-
-        // New school wheel delta (wheel event)
-        if ( 'deltaY' in orgEvent ) {
-            deltaY = orgEvent.deltaY * -1;
-            delta  = deltaY;
-        }
-        if ( 'deltaX' in orgEvent ) {
-            deltaX = orgEvent.deltaX;
-            if ( deltaY === 0 ) { delta  = deltaX * -1; }
-        }
-
-        // No change actually happened, no reason to go any further
-        if ( deltaY === 0 && deltaX === 0 ) { return; }
-
-        // Need to convert lines and pages to pixels if we aren't already in pixels
-        // There are three delta modes:
-        //   * deltaMode 0 is by pixels, nothing to do
-        //   * deltaMode 1 is by lines
-        //   * deltaMode 2 is by pages
-        if ( orgEvent.deltaMode === 1 ) {
-            var lineHeight = $.data(this, 'mousewheel-line-height');
-            delta  *= lineHeight;
-            deltaY *= lineHeight;
-            deltaX *= lineHeight;
-        } else if ( orgEvent.deltaMode === 2 ) {
-            var pageHeight = $.data(this, 'mousewheel-page-height');
-            delta  *= pageHeight;
-            deltaY *= pageHeight;
-            deltaX *= pageHeight;
-        }
-
-        // Store lowest absolute delta to normalize the delta values
-        absDelta = Math.max( Math.abs(deltaY), Math.abs(deltaX) );
-
-        if ( !lowestDelta || absDelta < lowestDelta ) {
-            lowestDelta = absDelta;
-
-            // Adjust older deltas if necessary
-            if ( shouldAdjustOldDeltas(orgEvent, absDelta) ) {
-                lowestDelta /= 40;
-            }
-        }
-
-        // Adjust older deltas if necessary
-        if ( shouldAdjustOldDeltas(orgEvent, absDelta) ) {
-            // Divide all the things by 40!
-            delta  /= 40;
-            deltaX /= 40;
-            deltaY /= 40;
-        }
-
-        // Get a whole, normalized value for the deltas
-        delta  = Math[ delta  >= 1 ? 'floor' : 'ceil' ](delta  / lowestDelta);
-        deltaX = Math[ deltaX >= 1 ? 'floor' : 'ceil' ](deltaX / lowestDelta);
-        deltaY = Math[ deltaY >= 1 ? 'floor' : 'ceil' ](deltaY / lowestDelta);
-
-        // Add information to the event object
-        event.deltaX = deltaX;
-        event.deltaY = deltaY;
-        event.deltaFactor = lowestDelta;
-        // Go ahead and set deltaMode to 0 since we converted to pixels
-        // Although this is a little odd since we overwrite the deltaX/Y
-        // properties with normalized deltas.
-        event.deltaMode = 0;
-
-        // Add event and delta to the front of the arguments
-        args.unshift(event, delta, deltaX, deltaY);
-
-        // Clearout lowestDelta after sometime to better
-        // handle multiple device types that give different
-        // a different lowestDelta
-        // Ex: trackpad = 3 and mouse wheel = 120
-        if (nullLowestDeltaTimeout) { clearTimeout(nullLowestDeltaTimeout); }
-        nullLowestDeltaTimeout = setTimeout(nullLowestDelta, 200);
-
-        return ($.event.dispatch || $.event.handle).apply(this, args);
-    }
-
-    function nullLowestDelta() {
-        lowestDelta = null;
-    }
-
-    function shouldAdjustOldDeltas(orgEvent, absDelta) {
-        // If this is an older event and the delta is divisable by 120,
-        // then we are assuming that the browser is treating this as an
-        // older mouse wheel event and that we should divide the deltas
-        // by 40 to try and get a more usable deltaFactor.
-        // Side note, this actually impacts the reported scroll distance
-        // in older browsers and can cause scrolling to be slower than native.
-        // Turn this off by setting $.event.special.mousewheel.settings.adjustOldDeltas to false.
-        return special.settings.adjustOldDeltas && orgEvent.type === 'mousewheel' && absDelta % 120 === 0;
-    }
-
-}));

src/perfect-scrollbar.js

@@ -19,7 +19,7 @@
 
   // The default settings for the plugin
   var defaultSettings = {
-    wheelSpeed: 10,
+    wheelSpeed: 1,
     wheelPropagation: false,
     minScrollbarLength: null,
     maxScrollbarLength: null,
@@ -328,16 +328,26 @@
 
       // bind handlers
       var bindMouseWheelHandler = function () {
-        // FIXME: Backward compatibility.
-        // After e.deltaFactor applied, wheelSpeed should have smaller value.
-        // Currently, there's no way to change the settings after the scrollbar initialized.
-        // But if the way is implemented in the future, wheelSpeed should be reset.
-        settings.wheelSpeed /= 10;
-
         var shouldPrevent = false;
-        $this.bind('mousewheel' + eventClassName, function (e, deprecatedDelta, deprecatedDeltaX, deprecatedDeltaY) {
+
-          var deltaX = e.deltaX * e.deltaFactor || deprecatedDeltaX,
+        var getDeltaFromEvent = function (e) {
-              deltaY = e.deltaY * e.deltaFactor || deprecatedDeltaY;
+          var deltaX = e.originalEvent.deltaX,
+              deltaY = -1 * e.originalEvent.deltaY;
+
+          if (typeof deltaX === "undefined" || typeof deltaY === "undefined") {
+            // OS X Safari
+            deltaX = -1 * e.originalEvent.wheelDeltaX / 6;
+            deltaY = e.originalEvent.wheelDeltaY / 6;
+          }
+
+          return [deltaX, deltaY];
+        };
+
+        var mousewheelHandler = function (e) {
+          var delta = getDeltaFromEvent(e);
+
+          var deltaX = delta[0],
+              deltaY = delta[1];
 
           shouldPrevent = false;
           if (!settings.useBothWheelAxes) {
@@ -373,7 +383,13 @@
             e.stopPropagation();
             e.preventDefault();
           }
-        });
+        };
+
+        if (typeof window.onwheel !== "undefined") {
+          $this.bind('wheel' + eventClassName, mousewheelHandler);
+        } else if (typeof window.onmousewheel !== "undefined") {
+          $this.bind('mousewheel' + eventClassName, mousewheelHandler);
+        }
 
         // fix Firefox scroll problem
         $this.bind('MozMousePixelScroll' + eventClassName, function (e) {
@@ -663,12 +679,11 @@
         bindMouseScrollXHandler();
         bindMouseScrollYHandler();
         bindRailClickHandler();
+        bindMouseWheelHandler();
+
         if (supportsTouch) {
           bindMobileTouchHandler();
         }
-        if ($this.mousewheel) {
-          bindMouseWheelHandler();
-        }
         if (settings.useKeyboard) {
           bindKeyboardHandler();
         }