Better handle deltaModes 1 (scroll by lines) and 2 (scroll by pages).

Author: brandonaaron

ChangeLog.md

@@ -1,5 +1,9 @@
 # Mouse Wheel ChangeLog
 
+## 3.1.7-pre
+
+* Better handle the `deltaMode` values 1 (lines) and 2 (pages)
+
 ## 3.1.6
 
 * Deprecating `delta`, `deltaX`, and `deltaY` event handler arguments

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "jquery-mousewheel",
-  "version": "3.1.6",
+  "version": "3.1.7-pre",
   "main": "./jquery.mousewheel.js",
   "ignore": [
     "*.json",

jquery.mousewheel.js

@@ -1,7 +1,7 @@
 /*! Copyright (c) 2013 Brandon Aaron (http://brandon.aaron.sh)
  * Licensed under the MIT License (LICENSE.txt).
  *
- * Version: 3.1.6
+ * Version: 3.1.7-pre
  *
  * Requires: jQuery 1.2.2+
  */
@@ -31,7 +31,7 @@
         }
     }
 
-    $.event.special.mousewheel = {
+    var special = $.event.special.mousewheel = {
         version: '3.1.6',
 
         setup: function() {
@@ -42,6 +42,9 @@
             } 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() {
@@ -52,6 +55,14 @@
             } else {
                 this.onmousewheel = null;
             }
+        },
+
+        getLineHeight: function(elem) {
+          return parseInt($(elem).offsetParent().css('fontSize'), 10);
+        },
+
+        getPageHeight: function(elem) {
+          return $(elem).height();
         }
     };
 
@@ -104,8 +115,26 @@
         // 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;
         }
@@ -119,6 +148,10 @@
         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);

mousewheel.jquery.json

@@ -7,7 +7,7 @@
         "mouse",
         "event"
     ],
-    "version": "3.1.6",
+    "version": "3.1.7-pre",
     "author": {
         "name": "Brandon Aaron",
         "url": "http://brandonaaron.net"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jquery-mousewheel",
-  "version": "3.1.6",
+  "version": "3.1.7-pre",
   "author": "Brandon Aaron <[email protected]> (http://brandonaaron.net/)",
   "description": "A jQuery plugin that adds cross-browser mouse wheel support.",
   "license": "MIT",