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?

Hi, Thanks for this excelent plugin (very usefull). It seems that mousewheel event doesn't work on Safari (tested on 5.1.7) for windows. is there a way to fix it properly ? Thanks.

Chrome 51 introduced passive event handlers. Maybe the performance of jquery-mousewheel can be improved with this:

• https://developers.google.com/web/updates/2016/06/passive-event-listeners

Read more:

• https://medium.com/@devlucky/about-passive-event-listeners-224ff620e68c#.fd3mjfvp4

Because I sometimes get this when using jquery.mousewheel.js:

Handling of 'wheel' input event was delayed for 730 ms due to main thread being busy. Consider marking event handler as 'passive' to make the page more responive.

In webkit when scrolling with mouse wheel we get a huge deltaFactor.

I use webkit based browser and I open a simple text page. I use mouse wheel to scroll. So I do only one scroll step and I get this numbers:

evt.deltaY: -1
evt.deltaMode: 0
evt.deltaFactor: 120
evt.originalEvent.deltaMode: 0
evt.originalEvent.detail: 0
evt.originalEvent.wheelDelta: -120
evt.originalEvent.wheelDeltaY: -120

If I check the difference in document.body.scrollTop it is only 4px. So, it looks like deltaFactor must be 4 in this case.

Here is a little screencast: https://www.monosnap.com/file/oatLFlX9U41gFeUDPRZsbF5zngjPQ3

And here is how mootools deal with delta (strange one but they also handle 120 as a constant for something):

(event.wheelDelta) ? event.wheelDelta / 120 : -(event.detail || 0) / 3

source https://github.com/mootools/mootools-core/blob/master/Source/Types/DOMEvent.js#L55-L56

with modern mice middle click is performed through the central wheel.

However, apparently the plugin converts all wheel events to a delta, i.e. a wheel turn.

How do I detect a simple click?

function (event) { console.log(event) }

altKey: false
bubbles: true
button: 0
buttons: undefined
cancelable: true
clientX: 716
clientY: 414
ctrlKey: false
currentTarget: div#va-accordion.va-container.no-margin
data: null
delegateTarget: div#va-accordion.va-container.no-margin
eventPhase: 3
handleObj: Object
isDefaultPrevented: function k(){return!0}
isPropagationStopped: function k(){return!0}
jQuery211019673938816413283: true
metaKey: false
offsetX: 549
offsetY: 159
originalEvent: WheelEvent
pageX: 716
pageY: 4371
relatedTarget: null
result: false
screenX: 716
screenY: 509
shiftKey: false
target: div.va-slice.va-slice-1.expanded
timeStamp: 1413607436027
toElement: div.va-slice.va-slice-1.expanded
type: "mousewheel"
view: Window
which: 1

function (event) { console.log(event.originalEvent) }

altKey: false
bubbles: true
button: 0
cancelBubble: false
cancelable: true
charCode: 0
clientX: 716
clientY: 414
clipboardData: undefined
ctrlKey: false
currentTarget: null
dataTransfer: null
defaultPrevented: true
deltaMode: 0
deltaX: -0
deltaY: 2
deltaZ: 0
detail: 0
eventPhase: 0
fromElement: null
keyCode: 0
layerX: 549
layerY: 159
metaKey: false
offsetX: 549
offsetY: 159
pageX: 716
pageY: 4371
path: NodeList[0]
relatedTarget: null
returnValue: false
screenX: 716
screenY: 509
shiftKey: false
srcElement: div.va-slice.va-slice-1.expanded
target: div.va-slice.va-slice-1.expanded
timeStamp: 1413607436027
toElement: div.va-slice.va-slice-1.expanded
type: "wheel"
view: Window
webkitDirectionInvertedFromDevice: false
webkitMovementX: 0
webkitMovementY: 0
wheelDelta: -6
wheelDeltaX: 0
wheelDeltaY: -6
which: 1
x: 716
y: 414

$.fn.jquery
2.1.1

This is not working with the trackpad of my dell xps 13 9343.

It works in chrome and mozilla & opera, but not in internet explorer & edge (Edge/14.14393) & safari

Doesn't seem to be working as it's suppose to here. Version 26 no problem, yet while updating to 27 something changed, in the test case everything seems to be normal, so very hard to tell what's going on. Any ideas? :)

Hey If the mouse is near the bottom scrollbar, but obviously inside the page, scrolling does not happen, strangely. Only if the mouse is moved towards the content does the scrolling re-initiates.

Strange behavior in any case!

Thanks.

I'm not sure how to use this on the $('body) ..

I tried this for testing and the scroll doesn't work..

$('body').on('mousewheel', function (event) {
     console.log(event.deltaX, event.deltaY, event.deltaFactor);
});

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
    }));
});

When I apply this code to my Slickgrid, I can no longer scroll horizontally when I Press Shift + Mouse Scroll. Horizontal scrolling was working previously.

Right now, it seems to move opposite to the browser scrolling. If you move wheel up, then the slider moves forward which is opposite of how browser works. Is there an option to reverse it?

I believe I'm seeing a warning error in Google Chrome saying:

[Violation] Added non-passive event listener to a scroll-blocking 'wheel' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952

This is pointing to the following code line: https://github.com/jquery/jquery-mousewheel/blob/fcb425e872c5b1eb45cbc4c8a5dcf4865b991bab/jquery.mousewheel.js#L40

How to reproduce:

/tmp/123$ npm install jquery-mousewheel  
/tmp/123  
└── [email protected]  
  
/tmp/123$ ls -aR  
.            ..           node_modules  
  
./node_modules:  
.                 ..                jquery-mousewheel  
  
./node_modules/jquery-mousewheel:  
.                    ChangeLog.md         README.md            package.json  
..                   LICENSE.txt          jquery.mousewheel.js

On Safari 9.0 (the latest), event.deltaY is either 1, or -1. It never goes any higher than that. So it's not consistent across browsers. On Chrome it works fine.