So in Monday's post (about the Spin Control), I briefly mentioned using the mouse scroll wheel in javascript. Actually, what I really said was that you could use the scroll wheel with the spin control, and it would increment/decrement the spin control value as you moved the wheel. But I didn't go into any details at all as to how you can actually do this. Well, today, we are going to take a look at how to get scroll wheel information in javascript.

Below, there is a little box (which should say "Scroll In Me" unless you already played around). If your mouse cursor is over that box and you scroll the scroll wheel, it should print out two numbers in the box. The first number is the amount that the browser said your scroll wheel moved (which can be different depending on the bowser), and the second number is a 'normalized' version, which should be the same across all browsers.

Amusing, eh? Well, it actually isn't that hard to do at all. In the end, it is just a different event to attach to, and then you have to grab data off of the result event object. The weirdness comes in because IE and Firefox have very different names for the scroll event. In Internet Explorer, the event is called onmousewheel, while in Firefox the event is called DOMMouseScroll. To make it even worse, Opera uses the Internet Explorer event name (without the 'on' part, so just mousewheel), but Opera needs to use the Firefox way of attaching event listeners.

Fortunately, it is pretty easy to wrap up. Remember the hookEvent and unhookEvent functions from way back in the Javascript Events tutorial? Well, they are about to get a small update:


Essentially, these two functions will let you always call the event mousewheel - in keeping with most of the other event names. Essentially, for Internet Explorer, we just add the 'on' part when attaching it (and we already had to do that for all the other events), and for Firefox/Opera/Safari we just attach both mousewheel and DOMMouseScroll. We can do this because none of the browsers mind if we attach to an event that doesn't exist - so Firefox doesn't care about mousewheel and Opera doesn't care about DOMMouseScroll.

But, sadly, that is only half the battle. There are two ways that the browsers return scroll wheel data. Thankfully, they are both on the event object - detail (for Firefox and Opera), and wheelData (for Internet Explorer, Safari, and Opera). Opera went and implemented both for some reason. So a function to get wheel data might look something like this:

And that would be it, except for the fact that not only do the browsers use different property names, the scaling of the data is different. For instance, a value of 3 from Firefox or Opera in detail is equal to a value of 120 in wheelDelta for Internet Explorer or Safari. Oh, and don't forget that scrolling down is a positive number for detail, but a negative number for wheelDelta. All that can be easily remedied, though, with a quick adjustment:


What this function does now is always return things using the Firefox scaling, but makes scrolling down negative (which I think makes the most sense). It is easy enough to change if you would like the final result in a different form. Generally, I've found that a result of 3 from this function is equal to a single click of the scroll wheel, but it actually can depend on your operating system and the type of mouse you are using.

There is one other thing that you are probably wondering. How do you make the page stop from scrolling when you are capturing the scroll event? Well, that is actually quite easy. Again, we are going to draw on the Events tutorial, this time grabbing the cancelEvent function:


If you cancel the scroll wheel event, the page itself will not scroll. So, for instance, we can modify our above MouseWheel function to read:


With that function, any scroll event that made it into that function would have no affect on the actual scrolling of the page.

So lets put all that together, and recreate the example from the top of the tutorial. First, the really simple html:


Now for the javascript (using the cancelEvent and hookEvent functions from above:


And that is that! Hopefully you are now enlightened when it comes to the mouse wheel and javascript, and as always, if you have any questions or comments, feel free to post them below.