diff --git a/.github/workflows/browserstack.yml b/.github/workflows/browserstack.yml index ad81b658..f50c262d 100644 --- a/.github/workflows/browserstack.yml +++ b/.github/workflows/browserstack.yml @@ -21,8 +21,6 @@ jobs: fail-fast: false matrix: BROWSER: - - 'IE_9' - - 'IE_10' - 'IE_11' - 'Safari_latest' - 'Safari_latest-1' diff --git a/README.md b/README.md index 6aae4a85..1bacb5a4 100644 --- a/README.md +++ b/README.md @@ -4,9 +4,6 @@ A [jQuery](https://jquery.com/) plugin that adds cross-browser mouse wheel suppo In order to use the plugin, simply bind the `mousewheel` event to an element. -It also provides two deprecated 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 @@ -15,15 +12,9 @@ has reported. Here is an example of using both the bind and helper method syntax: ```js -// using on $( "#my_elem" ).on( "mousewheel", function( event ) { console.log( event.deltaX, event.deltaY, event.deltaFactor ); } ); - -// using the event helper - not recommended! -$( "#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 diff --git a/jtr.yml b/jtr.yml index 5e50c776..545dc1a8 100644 --- a/jtr.yml +++ b/jtr.yml @@ -20,55 +20,7 @@ runs: - 3.6.4.min - 3.6.4.slim - 3.6.4.slim.min - - 3.5.1 - - 3.5.1.min - - 3.5.1.slim - - 3.5.1.slim.min - - 3.4.1 - - 3.4.1.min - - 3.4.1.slim - - 3.4.1.slim.min - - 3.3.1 - - 3.3.1.min - - 3.3.1.slim - - 3.3.1.slim.min - - 3.2.1 - - 3.2.1.min - - 3.2.1.slim - - 3.2.1.slim.min - - 3.1.1 - - 3.1.1.min - - 3.1.1.slim - - 3.1.1.slim.min - - 3.0.0 - - 3.0.0.min - - 3.0.0.slim - - 3.0.0.slim.min - 2.2.4 - 2.2.4.min - - 2.1.4 - - 2.1.4.min - - 2.0.3 - - 2.0.3.min - 1.12.4 - 1.12.4.min - - 1.11.3 - - 1.11.3.min - - 1.10.2 - - 1.10.2.min - - 1.9.1 - - 1.9.1.min - - 1.8.3 - - 1.8.3.min - - 1.7.2 - - 1.7.2.min - - 1.6.4 - - 1.6.4.min - - 1.5.2 - - 1.5.2.min - - 1.4.4 - - 1.4.4.min - - 1.3.2 - - 1.3.2.min - - 1.2.6 - - 1.2.6.min diff --git a/package-lock.json b/package-lock.json index b5782035..037ea6a1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,19 +8,20 @@ "name": "jquery-mousewheel", "version": "3.2.2", "license": "MIT", - "dependencies": { - "jquery": ">=1.2.6" - }, "devDependencies": { "@swc/core": "1.11.8", "eslint": "9.22.0", "eslint-config-jquery": "3.0.2", "globals": "16.0.0", + "jquery": "3.7.1", "jquery-test-runner": "0.2.6", "qunit": "2.24.1", "release-it": "18.1.2", "requirejs": "2.3.7", "rimraf": "^6.0.1" + }, + "peerDependencies": { + "jquery": ">=1.12.4 <2 || >=2.2.4 <3 || >=3.6.4" } }, "node_modules/@asamuzakjp/css-color": { @@ -3656,9 +3657,11 @@ } }, "node_modules/jquery": { - "version": "3.6.0", - "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz", - "integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw==" + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz", + "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==", + "dev": true, + "license": "MIT" }, "node_modules/jquery-test-runner": { "version": "0.2.6", diff --git a/package.json b/package.json index de4cc229..64e3aa54 100644 --- a/package.json +++ b/package.json @@ -49,14 +49,15 @@ "test:unit": "jtr", "test": "npm run build && npm run lint && npm run test:browser" }, - "dependencies": { - "jquery": ">=1.2.6" + "peerDependencies": { + "jquery": ">=1.12.4 <2 || >=2.2.4 <3 || >=3.6.4" }, "devDependencies": { "@swc/core": "1.11.8", "eslint": "9.22.0", "eslint-config-jquery": "3.0.2", "globals": "16.0.0", + "jquery": "3.7.1", "jquery-test-runner": "0.2.6", "qunit": "2.24.1", "requirejs": "2.3.7", diff --git a/src/jquery.mousewheel.js b/src/jquery.mousewheel.js index 14a36003..5a7e1bd4 100644 --- a/src/jquery.mousewheel.js +++ b/src/jquery.mousewheel.js @@ -26,29 +26,17 @@ "use strict"; var nullLowestDeltaTimeout, lowestDelta, - modernEvents = !!$.fn.on, - toFix = [ "wheel", "mousewheel", "DOMMouseScroll", "MozMousePixelScroll" ], - toBind = ( "onwheel" in window.document || window.document.documentMode >= 9 ) ? - [ "wheel" ] : [ "mousewheel", "DomMouseScroll", "MozMousePixelScroll" ], slice = Array.prototype.slice; if ( $.event.fixHooks ) { - for ( var i = toFix.length; i; ) { - $.event.fixHooks[ toFix[ --i ] ] = $.event.mouseHooks; - } + $.event.fixHooks.wheel = $.event.mouseHooks; } var special = $.event.special.mousewheel = { version: "@VERSION", setup: function() { - if ( this.addEventListener ) { - for ( var i = toBind.length; i; ) { - this.addEventListener( toBind[ --i ], handler, false ); - } - } else { - this.onmousewheel = handler; - } + this.addEventListener( "wheel", handler, false ); // Store the line height and page height for this particular element $.data( this, "mousewheel-line-height", special.getLineHeight( this ) ); @@ -56,13 +44,7 @@ }, teardown: function() { - if ( this.removeEventListener ) { - for ( var i = toBind.length; i; ) { - this.removeEventListener( toBind[ --i ], handler, false ); - } - } else { - this.onmousewheel = null; - } + this.removeEventListener( "wheel", handler, false ); // Clean up the data we added to the element $.removeData( this, "mousewheel-line-height" ); @@ -71,12 +53,12 @@ getLineHeight: function( elem ) { var $elem = $( elem ), - $parent = $elem[ "offsetParent" in $.fn ? "offsetParent" : "parent" ](); + $parent = $elem.offsetParent(); if ( !$parent.length ) { $parent = $( "body" ); } return parseInt( $parent.css( "fontSize" ), 10 ) || - parseInt( $elem.css( "fontSize" ), 10 ) || 16; + parseInt( $elem.css( "fontSize" ), 10 ) || 16; }, getPageHeight: function( elem ) { @@ -84,64 +66,27 @@ }, settings: { - adjustOldDeltas: true, // see shouldAdjustOldDeltas() below normalizeOffset: true // calls getBoundingClientRect for each event } }; - $.fn.extend( { - mousewheel: function( fn ) { - return fn ? - this[ modernEvents ? "on" : "bind" ]( "mousewheel", fn ) : - this.trigger( "mousewheel" ); - }, - - unmousewheel: function( fn ) { - return this[ modernEvents ? "off" : "unbind" ]( "mousewheel", fn ); - } - } ); - + function handler( origEvent ) { + var args = slice.call( arguments, 1 ), + delta = 0, + deltaX = 0, + deltaY = 0, + absDelta = 0, + event = $.event.fix( origEvent ); - 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 compatability - delta = deltaY === 0 ? deltaX : deltaY; - // New school wheel delta (wheel event) - if ( "deltaY" in orgEvent ) { - deltaY = orgEvent.deltaY * -1; + if ( "deltaY" in origEvent ) { + deltaY = origEvent.deltaY * -1; delta = deltaY; } - if ( "deltaX" in orgEvent ) { - deltaX = orgEvent.deltaX; + if ( "deltaX" in origEvent ) { + deltaX = origEvent.deltaX; if ( deltaY === 0 ) { delta = deltaX * -1; } @@ -157,12 +102,12 @@ // * deltaMode 0 is by pixels, nothing to do // * deltaMode 1 is by lines // * deltaMode 2 is by pages - if ( orgEvent.deltaMode === 1 ) { + if ( origEvent.deltaMode === 1 ) { var lineHeight = $.data( this, "mousewheel-line-height" ); delta *= lineHeight; deltaY *= lineHeight; deltaX *= lineHeight; - } else if ( orgEvent.deltaMode === 2 ) { + } else if ( origEvent.deltaMode === 2 ) { var pageHeight = $.data( this, "mousewheel-page-height" ); delta *= pageHeight; deltaY *= pageHeight; @@ -174,20 +119,6 @@ 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 @@ -219,27 +150,12 @@ // handle multiple device types that give different // a different lowestDelta // Ex: trackpad = 3 and mouse wheel = 120 - if ( nullLowestDeltaTimeout ) { - window.clearTimeout( nullLowestDeltaTimeout ); - } + window.clearTimeout( nullLowestDeltaTimeout ); nullLowestDeltaTimeout = window.setTimeout( function() { lowestDelta = null; }, 200 ); - return ( $.event.dispatch || $.event.handle ).apply( this, args ); - } - - function shouldAdjustOldDeltas( orgEvent, absDelta ) { - - // If this is an older event and the delta is divisible 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; + return $.event.dispatch.apply( this, args ); } } ); diff --git a/test/manual.html b/test/manual.html index f8016c62..db7e71b4 100644 --- a/test/manual.html +++ b/test/manual.html @@ -142,18 +142,18 @@ }; $( document ) - .mousewheel( function( event, delta ) { + .on( "mousewheel", function( event, delta ) { loghandle( event, delta ); } ); $( "#test1" ) - .mousewheel( function( event, delta ) { + .on( "mousewheel", function( event, delta ) { loghandle( event, delta ); log( "pageX: " + event.pageX + " pageY: " + event.pageY ); } ); $( "#test2" ) - .mousewheel( function( event, delta ) { + .on( "mousewheel", function( event, delta ) { loghandle( event, delta ); return false; // prevent default } ); @@ -167,43 +167,43 @@ log( "#test3: mouseout" ); } ) - .mousewheel( function() { + .on( "mousewheel", function() { log( "#test3: I should not have been logged" ); } ) - .unmousewheel(); + .off( "mousewheel" ); var testRemoval = function() { log( "#test4: I should not have been logged" ); }; $( "#test4" ) - .mousewheel( function( event, delta ) { + .on( "mousewheel", function( event, delta ) { loghandle( event, delta ); return false; } ) - .mousewheel( testRemoval ) - .mousewheel( function( event, delta ) { + .on( "mousewheel", testRemoval ) + .on( "mousewheel", function( event, delta ) { loghandle( event, delta ); return false; } ) - .unmousewheel( testRemoval ); + .off( "mousewheel", testRemoval ); $( "#test5" ) - .mousewheel( function( event, delta ) { + .on( "mousewheel", function( event, delta ) { loghandle( event, delta ); event.stopPropagation(); event.preventDefault(); } ); $( "#test6" ) - .mousewheel( function( event, delta ) { + .on( "mousewheel", function( event, delta ) { loghandle( event, delta ); event.stopPropagation(); event.preventDefault(); } ); $( "#test7" ) - .mousewheel( function( event, delta ) { + .on( "mousewheel", function( event, delta ) { loghandle( event, delta ); event.preventDefault(); } ); @@ -222,7 +222,7 @@