Forums

I was testing out event-mousewheel and noticed an odd thing. I was going to file a ticket, but as I was making a simple example I noticed some more odd things. There isn't much documentation for event-mousewheel, and no examples, so I don't know exactly what is the intended behavior. So I could write up a ticket saying that event-mousewheel does not work as expected, but I feel like it would be more helpful to get more input from everyone first.

Issue #1: I can't easily subscribe to mousewheel for a specific node. (I submitted a ticket for this one.)

The first thing I noticed, the mousewheel event always gets attached to the document. There's probably a very good reason as to why it does this, but I'm attempting to subscribe to an event that occurs when the user scrolls his or her mouse wheel and when the cursor is over a specific node. Currently, this is not a straightforward task, since the event always gets attached to the document. myNode.on('mousewheel', ...) always gets called, no matter where the cursor is on the page. I made this example: http://jsfiddle.net/sHCpD/

In that example, two nodes are set up to listen on mousewheel. Each one keeps track of their own wheelDelta values and displays them. It doesn't matter where in the document the cursor is, they both get updated every time the mouse wheel moves.

My first thought to workaround this issue was to do something like if (eventFacade.target === myNode) { ... } and that seemed to work at first. It begins to fail when myNode has child nodes and the cursor is over one of them. Then eventFacade.target is the child node, and that condition becomes more complicated.

So a complete solution is to separately subscribe to mouseenter and mouseleave for that node, keep track of the state of cursor within the node, and use that as the condition within the mousewheel function. I feel like myNode.on('mousewheel', ...) should do this without all of that extra work. If I wanted to subscribe to mousewheel on the document, I would do Y.config.doc.on('mousewheel', ...) or Y.on('mousewheel', ...).

Also, very strangely, it works the way I want it to, only with Simple YUI, only in Chrome: http://jsfiddle.net/sHCpD/1/

Issue #2: wheelDelta isn't as useful as I'd like it to be. Is there anything better?

As I was trying this in different browsers, I noticed that the values of wheelDelta were different. What is wheelDelta? The docs say: 'For mousewheel or DOMMouseScroll events, the pixel distance of the scroll.'

The pixel distance of the scroll is not very helpful to me in my use case. For any use case where the pixel distance of the scroll is helpful, wouldn't the other scroll events be more appropriate? How would someone make good use of the pixel distance of the scroll?

If the window is already at its maximum scroll position, or isn't scrollable, or if I preventDefault on the mousewheel event, nothing actually gets scrolled, yet wheelDelta is a non zero number; that doesn't even make sense. So I still don't know what wheelDelta really is.

I tested multiple browsers using the same fiddle I posted above. This isn't entirely scientific, but here is what I observed:

Chrome 17:
Forward 1 Roll: wheelDelta is always 2
Backward 1 Roll: wheelDelta is always -1
Left 1 Roll: wheelDelta is always 2
Right 1 Roll: wheelDelta is always -1
Disengage the ratchet, spin forward: wheelDelta is always 2
Disengage the ratchet, spin backward: wheelDelta is always -1

Chrome 19:
Forward 1 Roll: wheelDelta is always 2
Backward 1 Roll: wheelDelta is always -1
Left 1 Roll: wheelDelta is always 2
Right 1 Roll: wheelDelta is always -1
Disengage the ratchet, spin forward: wheelDelta is either 2 or 3
Disengage the ratchet, spin backward: wheelDelta is usually -1 or -3, sometimes -4 or -6, but at one point chrome froze for several seconds and then -228 showed up.

Firefox 3.6:
Forward 1 Roll: wheelDelta is always 3
Backward 1 Roll: wheelDelta is always -3
Left 1 Roll: wheelDelta is always 3
Right 1 Roll: wheelDelta is always -3
Disengage the ratchet, spin forward: wheelDelta is always 3
Disengage the ratchet, spin backward: wheelDelta is always -3

Firefox 11:
Forward 1 Roll: wheelDelta is always 3
Backward 1 Roll: wheelDelta is always -3
Left 1 Roll: wheelDelta is always 1
Right 1 Roll: wheelDelta is always -1
Disengage the ratchet, spin forward: wheelDelta is always 3
Disengage the ratchet, spin backward: wheelDelta is always -3

Internet Explorer 8:
Forward 1 Roll: wheelDelta is always 2
Backward 1 Roll: wheelDelta is always -1
Left 1 Roll: wheelDelta is always 2
Right 1 Roll: wheelDelta is always -1
Disengage the ratchet, spin forward: wheelDelta is usually 2, but saw other numbers up to 81
Disengage the ratchet, spin backward: wheelDelta is usually -1 but saw other numbers up to -72

Internet Explorer 9:
Forward 1 Roll: wheelDelta is always 2
Backward 1 Roll: wheelDelta is always -1
Left 1 Roll: wheelDelta is always 2
Right 1 Roll: wheelDelta is always -1
Disengage the ratchet, spin forward: wheelDelta is usually 2, but saw other numbers up to 26
Disengage the ratchet, spin backward: wheelDelta is usually -1, but saw other numbers up to -37

Opera 11.6:
Forward 1 Roll: wheelDelta is always 3
Backward 1 Roll: wheelDelta is always -3
Left 1 Roll: wheelDelta is always 3
Right 1 Roll: wheelDelta is always -3
Disengage the ratchet, spin forward: wheelDelta is always 3
Disengage the ratchet, spin backward: wheelDelta is always -3

Safari 5.1:
Scroll Forward 1 Roll: wheelDelta is always 2
Scroll Backward 1 Roll: wheelDelta is always -1
Scroll Left 1 Roll: wheelDelta is always 2
Scroll Right 1 Roll: wheelDelta is always -1
Disengage the ratchet, spin forward: wheelDelta is always 2
Disengage the ratchet, spin backward: wheelDelta is almost always -1, extremely rarely saw a -3 or -7

Alt, Ctrl, and Shift keys also have different effects on wheelDelta which differ per browser.

During a fast spin, some browsers repeat the same wheelDelta many times, other browsers will show values of higher magnitudes. This brings up a question that is too difficult for me to test. Do the browsers that occasionally show higher magnitudes for wheelDelta fire fewer mousewheel events? For example, Firefox always has a wheelDelta of 3 for a backward scroll. If I spin the wheel backwards, it might fire 2 dozen events. Is it possible that the same spin, in Chrome would fire only 1 dozen events, but the wheelDelta for each of those would be higher than normal?

There are many examples of user interfaces that use the mouse wheel for tasks other than scrolling: Many 3d applications and Google Maps use the mouse wheel to zoom; many games use the mouse wheel to switch weapons or change modes; in Gnome Panel on Linux using the mouse wheel over the taskbar will iterate through the active applications. If I'm subscribing to the mousewheel event, I probably don't want to scroll something. The browser does that naturally and if I wanted to just observe a scroll happening there are other scroll events I could listen to.

Since I don't care about the scrolling, I also don't care about the pixel distance of the scroll. The definition of wheelDelta provided here makes more sense: http://www.w3.org/2008/webapps/wiki/Mousewheel That would mean that wheelDelta is the number of individual rolls, which has little to do with pixels. Aside from my question above about fast spinning, it seems like there is one event fired per roll. In that case when would wheelDelta ever be anything other than 1 or 0? If that's the case, could wheelDelta just go away? I'd rather deal with either frequency of events or magnitude of events, not both if I can help it.

I suppose there's the possibility of super sensitive scrolling that could result in fractional values of wheelDelta. That seems rare, and a special sensitivemousewheel event could be made to support it. Also diagonal scrolling could result in fractional values of wheelDeltaX, wheelDeltaY, wheelDeltaZ. (which YUI does not provide currently anyway) I think diagonally scrolling wheels and trackballs have a different event, 'mousemultiwheel', which handles that. I'm kind of confused why a regular mousewheel event would try to handle diagonal rolls.

Since wheelDelta is currently the only mousewheel specific property on the eventFacade, there is no reliable way to tell the difference between a forward/backward scroll and a left/right scroll. The w3 wiki I linked above, shows individual wheelDeltaX, wheelDeltaY, and wheelDeltaZ properties. While those would be useful to have if a 3d and/or diagonally scrolling wheel was used, currently I feel like a simple wheelDirection property with a value of, 'backward', 'forward', 'left', or 'right' would be satisfactory for most cases.

@Matt I thought of this same thing, but delegate isn't supported for mousewheel (see event-mousewheel docs here http://yuilibrary.com/yui/docs/event/).