jquery / jquery-mousewheel Goto Github PK

Nice extension but, default ctrl + wheel behavior (zoom) cannot be overriden in chrome browser, mousewheel event is not triggered. Is there any solution ?

Regards,
Cleoo

ignore... my bad

Any use of 3.0.3 w/ IE 7 or 8 throws a JS error:

Message: 'axis' is null or not an object
Line: 64
Char: 5
Code: 0

Line 64 is in the "Gecko" conditional block, but looks like IE's taking it anyway.

See testcase: http://www.lifford.org/exp/mousewheel/

With version: 3.0.5 in Firefox 7.0.1 on OS X with jQuery 1.7 I get the following values whenever the mousewheel event is triggered:

delta = 0
deltaX = 0
deltaY = 0

Hoping for a fix.

Since it was never officially supported by jQuery and has been completely removed as of 1.9.0, I think it should be removed from the code. For more info, see here.

moronicbajebus has a fork with these added: source and tests

I want to retain default mousewheel pagescroll on Y axis, while capturing event data on X axis.

when i scroll the bar to "top" or "bottom" by mouse wheel,
the block used mousewheel plugin will shake
like this example:
http://www.aplweb.co.uk/blog/js/scrollbars-v2/
try to scroll the bar to top

but it has no problem in Chome, IE
my firefox version is 6.0

(Originally reported this at the jScrollPane repo: vitch/jScrollPane#198)

I just noticed that at least I am facing a problem with the mouse scroll on Firefox 17: Scrolling the content area with the mouse wheel etc. will also scroll the whole page. This seems to apply to the examples included with jScrollPane and jQuery Mousewheel as well, specifically Test#2 (prevent default) is not working properly. Works normal on Firefox 16, Chrome and Safari.

Using jScrollPane v2.0.0beta12 - 2012-09-27, jQuery Mousewheel.js 3.0.6, Mozilla/5.0 (Macintosh; Intel Mac OS X 10.7; rv:18.0) Gecko/20100101 Firefox/18.0

I'm guessing this is related to the new Wheel Event in FF17: https://wiki.mozilla.org/Gecko:Mouse_Wheel_Scrolling#DOM_mouse_wheel_events_and_Default_action

I'm having issues with the plugin when scrolling inside an iframe in IE. I realize that when you scroll over an iframe the iframe captures the scroll event, but jquery ui draggable has an "iframefix" option that, from what I was able to see, wraps the iframe in a div or adds some sort of shim to the iframe. Not sure if anyone would be willing to look into something like this.

The mousewheel won't work when the content is long.
For example:
Download the jquery-mousewheel-3.0.6.zip file. Unzip the file, and change the "simple_example.html", copy the content "<p>Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti. </p>" and paste it about 500 times.Then open the "simple_example.html" with chrome or ff.The mousewheel won't work.

I am trying to use the mousewheel on an input field with the jQuery.ui spinner (http://jqueryui.com/spinner/#default). But after a page reload (F5) it don't just change the value on the input field but also scrolls the page which it shouldn't. On the jQuery.ui demo site it looks to work but on my test site the error occure. Firefox 16.0.2, jQuery 1.8.2, jQuery UI 1.9.0, In Chrome it seems to work.

Not sure if this plugin is still being developed?

I have recently used this with jScrollPane and noticed that it doesn't work in FF/IE when using jQuery 1.7.2. I spent some time and figured out why that was and the fix is pretty easy

add the following lines

        /* Aaron fix */
        if (orgEvent.detail) { delta = -orgEvent.detail / 3; }
        if (orgEvent.wheelDelta) { delta = orgEvent.wheelDelta / 120; }

... right below

        // Old school scrollwheel delta
        if (event.wheelDelta) { delta = event.wheelDelta / 120; }
        if (event.detail) { delta = -event.detail / 3; }

As there hasn't been any updates in over 8 months and there are 3 pull requests, I may fork this and update

delta, deltaX, deltaY returns 0

the best reference for how to do this is the google closure library, the file youll want to look at is mousewheelhandler.js i have ported one aspect of how they normalize velocity.... see below. Seems to work nicely.

/*! Copyright (c) 2010 Brandon Aaron (http://brandonaaron.net)
 * Licensed under the MIT License (LICENSE.txt).
 *
 * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
 * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
 * Thanks to: Seamus Leahy for adding deltaX and deltaY
 *
 * Version: 3.0.4
 *
 * Requires: 1.2.2+
 */


// need chrome visibility to fix scroll variances
(function($) {
    var userAgent = navigator.userAgent.toLowerCase();
    $.browser.chrome = /chrome/.test(userAgent);
})(jQuery);


(function($) {

var types = ['DOMMouseScroll', 'mousewheel'];

$.event.special.mousewheel = {
    setup: function() {
        if ( this.addEventListener ) {
            for ( var i=types.length; i; ) {
                this.addEventListener( types[--i], handler, false );
            }
        } else {
            this.onmousewheel = handler;
        }
    },

    teardown: function() {
        if ( this.removeEventListener ) {
            for ( var i=types.length; i; ) {
                this.removeEventListener( types[--i], handler, false );
            }
        } else {
            this.onmousewheel = null;
        }
    }
};

$.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, returnValue = true, deltaX = 0, deltaY = 0;
    event = $.event.fix(orgEvent);
    event.type = "mousewheel";


    // Old school scrollwheel delta
    if ( event.wheelDelta ) { delta = event.wheelDelta/120; }
    if ( event.detail     ) { delta = -event.detail/3; }

    // New school multidimensional scroll (touchpads) deltas
    deltaY = delta;

    // Gecko
    if ( orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) {
        deltaY = 0;
        deltaX = -1*delta;
    }

    // Webkit
    var wheelDeltaScaleFactor = 1;
    console.log(jQuery.browser);
    if (jQuery.browser.msie || (jQuery.browser.webkit && !jQuery.browser.chrome)) {
      wheelDeltaScaleFactor = 40;
    }

    if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY/120/wheelDeltaScaleFactor; }
    if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = -1*orgEvent.wheelDeltaX/120/wheelDeltaScaleFactor; }

    // Add event and delta to the front of the arguments
    args.unshift(event, delta, deltaX, deltaY);

    return $.event.handle.apply(this, args);
}

})(jQuery);

It seems like the mousewheel plugin has no effect when used inside a jQuery UI dialog component.

Hello. I want to dramatically slow down speed of mousewheel. It move too fast with mousewheel.

I try look for delta I can change, but cannot find any delta to edit.

What I can edit to make mousewheel move very slowly? Thank you.

Curious if you could please recommend a good solution for integrating touch support on mobile devices.

Thanks

Problem with FF 16.0.1 version, deltaX and deltaY are NaN in mousewheel callback.
orgEvent doesn't have this values and defaults should be provided.
I've resolved this issue adding else statements like this:

// Webkit
if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY; }
else deltaY = delta;
if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = orgEvent.wheelDeltaX * -1; }
else deltaX = delta;

I don't know if this known FF problem or my portable FF issue, but the code above works fine.

Will the plugin support "horizontal" wheel-ing that you get
on, say, the MacBook notebooks when you swipe horizontally.

Thanks,
--P

The DOM standard has a new 'wheel' event. This supports X and Y deltas and pixel/line/page scrolling. IIRC it's already implemented by WebKit and IE10 and Gecko is also working on implementing it.

Hello, I tried to prevent default event only when scroll on X axis, without success.. What can I do to keep my page with deltaY default scrolling, and overwrite only deltaX default event?

Thanks

Hello,

I've made an update from 3.0.6 to the 3.1.3 and i notice a real problem on mac (safari or chrome).

The scroll up / down value is many time faster than the debian / windows version.

I've tried to put the /3 and /120 in the newest code, but seems not better,

i'll dig deeper soon to let you know, because i've not a mac right now

Thanks for your time and code,

JB

Hi Aaron. I think I've found a bug. I get an odd blank area on the top of the control. Here's how I get it: I scroll down using the scrollbar at the right (not the mousewheel) and, while keeping the left mouse button pressed, I move it out of the control, which makes it disappear. This is the right behaviour, but when I move the mouse back into the control, a big blank space appears at the top.
I have tested it with 16 elements in scroll-bar, and what I can see is that "top" value for

See title.

Hey thanks for the great jquery extension.

I noticed that the page still scrolls even if there is a mouse wheel event being triggered.

By adding two lines to your js file, I was able to disable this

https://gist.github.com/1519200

Just seeing if this is something that you'd like to incorporate into your project (possibly with a flag toggling this). I'm fine w/ distributing this change under the MIT license.

it always scrolls pixel by pixel, no matter how tall content is
tested on FF 22, Chrome 28 with jquery 1.10.1

I am sorry.
It's my fault.
It work.

Tried a simple test in Firefox 14, Chrome 21, and IE9.

When I try to disable document scroll, it scrolls like 1-3 lines in Firefox 14 before stopping. In Chrome 21 and IE9, disabling document scroll prevents me from scrolling at all, period.

$(document).bind('touchmove mousewheel', function(event) {
    event.preventDefault();
});

Recreated in jsFiddle http://jsfiddle.net/2qrTF/

The reasoning is simple. Imagine having a scrollable element and a separate element, emulating a scrollbar. Mousewheel events on the scrollbar should trigger target element's mousewheel event, but a simple call to trigger is impossible due to the fact that delta parameters cannot be passed on.

Now if delta params are inside the event object, then proxying the event is as simple as

$('#scrollbar').on('mousewheel', function (event) {
    $('#scrollable-element').trigger($.extend($.Event('mousewheel'), {
        delta: event.delta,
        deltaX: event.deltaX,
        deltaY: event.deltaY
    }));
});

hi!

when using a trackpad or a magic mouse multiple events are triggered for every touch-scroll, sometimes taking as long as 1-2 seconds to stop, depending the scrolling "speed" and due to the inertia setting on mac osx.

I'm using mousewheel in a scenario where I move through news items on mousewheel and ideally I only want to move by on one each mousewheel action on windows, one each touch-scroll gesture on a mac trackpad.

The multiple events triggered make this impossible to do. I've tried unbinding and rebinding but as soon as I rebind the events triggered by the touch action before the unbind keep getting detected. I've tried filtering the delta to only scroll if it's between 2 values but its making the scroll very unreliable. Rebinding mousewheel only after the inertia events stop is also an impossibility because it would mean only allowing one scroll every two seconds.

do you have any ideas on how to overcome this?

Using jscrollpane for example, the wheel does not work in Firefox 10.0.2 or 3.6 under Windows 7 or XP:
http://jscrollpane.kelvinluck.com/arrows.html

Even using the latest version. Is this is a known issue?
thanks!

Hi Brandon,

Thanks for your great plugin, I found that the velocity returned for the latest Webkit browsers is to high. The following mod seems to do the trick:

// Webkit
// Currently the latest WebKit browsers need a value of 2700 instead of 120
if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY/2700; }
if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = -1*orgEvent.wheelDeltaX/2700; }

Cheers,
Joost

I test with Safari 5.1.2 on Windows7 64 bit.
If the scrolling to the left, the deltaX in Safari is positive (1), but others like Chrome and Firefox is negative (-1)

I don't know if it's really a issue, for me it is.

Look at: http://brandonaaron.net/code/mousewheel/demos

if you mousewheel inside the webpage (not inside the box), all of the content is moved;
If you mousewheel inside the box, only the text is changed and the webpage don't move at all;

It happens only if you mousewheel the webpage and then mousewheel OVER THE TEXT inside the box, the text is changed AND the webpage moves too, the same occours in the text field.

Im running this on ie8 and ie9 with a mighty mouse in parallels, the horizontal scroll seems to work in other areas of the OS just not in ie8 or ie9 (I havent tested elsewhere). Has anyone seen any evidence of being able to detect a horizontal mousewheel event on ANY element IE? I've been looking most of the day and have come up with nothing.

In the IE7 browser the #logger element is not visible, thus no log is present and it seems like wheel event is not working. After removing position:absolute; from css, i was able to see the test log.

I'm getting an error in IE8 saying 'axis' is null or not an object. Line 64 char 5. Is it you or me??

jscrollpane uses your lib by binding to "mousewheel.jsp" event
https://github.com/vitch/jScrollPane
I load them with curl, an AMD loader, with its non-AMD loader plugin (js!)
https://github.com/cujojs/curl
mousewheel works only if i comment out
if ( typeof define === 'function' && define.amd )

Please help me in a few sentences!

If you try to press scroll button it doesn't work, If you double tap an area thats not around the button it will goto that, but not the same way as with a mouse.

(I apologize if this is covered by one of the existing normalization issues, but all of them are closed and I'm seeing this with the 3.0.6 version of the plugin)

Running Chrome 15.0.874.121 and Firefox 8.0 on OSX 10.6.8; testing with a mighty mouse scroll ball.
A single scroll click registers as 0.25 delta with Chrome, but 0.3333 with Firefox; the difference is about 30% which is very noticeable.

It seems that Mousewheel doesn't work anymore with jQuery 1.7+, at least using Aurora 10 and Mac OSX.
Falling back to jQuery 1.6.4 fixes the issue.

I have a small example of mousewheel running and the up / down scroll works beautifully to force a left / right scroll, however the actual left/right scroll with my macbook trackpad is very glitchy. Is there any way to preventDefault() for only up / down scroll and let the browse control left / right.

        $(document).ready(function(){

            $("body").mousewheel(function(event, delta, deltaX, deltaY) {

                event.preventDefault();

                this.scrollLeft -= (delta * 20);

                console.log(delta, deltaX, deltaY);

                //this.scrollLeft -= (delta * 30);

            });

        });

Hi Brandon,

Thanks for your work on the jquery mousewheel plugin. I am plannin on using it to provide mousewheel scrolling for a horizontal site.

On the demo page I see a velocity of a bout 25 with Chrome and about 1.3 in Firefox. It seems the delta needs to be multiplied to get a typical scrolling experience (by around 30). But this the scrolling over sensitive in Chrome. Maybe this is specific to Chrome on OSX.

Regards, Mark

Scrolling mouse wheel up /down gives a positive/negative wheelDelta value respectively but when I click the wheel (which enables auto scroll) and move the mouse around, nothing happens. Is it a bug or this feature is not implemented yet?

Not sure if this is by design or a bug but the mousewheel event on input fields (e.g. an <input type="number">) is fired before the value of the field changes. For example when you use the mouse wheel to scroll through numbers.

Example

Accessing the value of the field through val() in the mousewheel callback returns the previous, old value.

jQuery version 1.7.1, mousewheel version 3.0.6

Hello,
in IE10 the code above always returns "0,0,0"

$("body").mousewheel(function (event, delta, deltaX, deltaY) {
console.log(delta, deltaX, deltaY);
});

The jQuery Foundation have lunched a jQuery Plugin Registry, jquery.mousewheel should be there.

If I'm not mistaken, it seems to me that IE8 is not supported.

What can I do to have mousewheel working with IE8 ? I tried a lot of solutions tweaking your code these last days, without results and I despair...