Supporting the mouse wheel can add further interactivity to your HTML5 web pages. Rather than scrolling the page, you could perform a different action such as zooming in or out.
View the mouse wheel demonstration page…
Most browsers support the “mousewheel” event for any element. You can register a handling function which is passed an event object. This exposes a wheelDelta property; a positive value for scrolling up or a negative value for scolling down. The larger or smaller the value, the bigger the movement.
Unfortunately, there’s one browser which doesn’t support the the “mousewheel” event. You’re wrong: it’s Firefox. Mozilla has implemented a “DOMMouseScroll” event. This passes an event object with a detail property but, unlike wheelDelta, it returns a positive value for scrolling down. So, until Mozilla adopt the event, we have a bizarre situation where it’s actually a little easier to code for IE6! That’s not something you hear said every day.
You should also note that Apple disable the scroll wheel in Safari, but support is available in the webkit engine so your code won’t cause any problems.
Adding a mousewheel Event Handler
Let’s add an image to our web page which will zoom in and out in response to the mouse wheel:
<img id="myimage" src="myimage.jpg" alt="my image" />
var myimage = document.getElementById("myimage");
if (myimage.addEventListener) {
// IE9, Chrome, Safari, Opera
myimage.addEventListener("mousewheel", MouseWheelHandler, false);
// Firefox
myimage.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
}
// IE 6/7/8
else myimage.attachEvent("onmousewheel", MouseWheelHandler);
The Cross-Browser mousewheel Event Handling Function
Our MouseWheelHandler can now determine the wheel movement delta. In this case, we’re going to reverse Firefox’sdetail value and return either 1 for up or -1 for down:
function MouseWheelHandler(e) {
// cross-browser wheel delta
var e = window.event || e; // old IE support
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
myimage.style.width = Math.max(50, Math.min(800, myimage.width + (30 * delta))) + "px";
return false;
}
Frequently Asked Questions about HTML5 JavaScript Mouse Wheel
How can I detect a mouse wheel event in JavaScript?
Detecting a mouse wheel event in JavaScript can be achieved by using the ‘wheel’ event. This event is fired when the user rotates the mouse wheel over an element. You can add an event listener to the element and specify ‘wheel’ as the event type. The event listener function will be called whenever the ‘wheel’ event is fired. Here’s a simple example:element.addEventListener('wheel', function(event) {
console.log('Wheel event detected!');});
In this code, ‘element’ is the HTML element you want to detect the wheel event on.
What is the difference between ‘wheel’ and ‘mousewheel’ events?
The ‘wheel’ event is a standard event that works across all modern browsers. It provides detailed information about the amount and direction of wheel movement. On the other hand, the ‘mousewheel’ event is a non-standard event that was originally introduced by Internet Explorer and later adopted by other browsers. However, it’s not recommended to use the ‘mousewheel’ event as it’s not supported by all browsers, especially Firefox.
How can I determine the direction of the mouse wheel movement?
The ‘wheel’ event provides a property called ‘deltaY’ which gives the amount of vertical scrolling performed by the user. If ‘deltaY’ is positive, it means the user scrolled down, and if it’s negative, the user scrolled up. Here’s an example:element.addEventListener('wheel', function(event) {
if (event.deltaY > 0) {
console.log('Scrolled down');
} else {
console.log('Scrolled up');
}});
Can I prevent the default action of the mouse wheel event?
Yes, you can prevent the default action of the mouse wheel event by calling the ‘preventDefault’ method of the event object. This can be useful when you want to implement custom scrolling behavior. Here’s how you can do it:element.addEventListener('wheel', function(event) {
event.preventDefault();
// Implement custom scrolling behavior here});
How can I detect horizontal scrolling with the mouse wheel?
The ‘wheel’ event provides another property called ‘deltaX’ which gives the amount of horizontal scrolling performed by the user. If ‘deltaX’ is positive, it means the user scrolled to the right, and if it’s negative, the user scrolled to the left. Here’s an example:element.addEventListener('wheel', function(event) {
if (event.deltaX > 0) {
console.log('Scrolled right');
} else {
console.log('Scrolled left');
}});
What is the ‘deltaMode’ property in the ‘wheel’ event?
The ‘deltaMode’ property in the ‘wheel’ event indicates the unit of measurement for ‘deltaX’ and ‘deltaY’. It can have one of three values: 0 (pixels), 1 (lines), or 2 (pages). Most of the time, ‘deltaMode’ will be 0, indicating that ‘deltaX’ and ‘deltaY’ are in pixels.
Can I detect mouse wheel events on mobile devices?
Mouse wheel events are specific to devices with a physical mouse. On mobile devices, you would typically use touch events like ‘touchstart’, ‘touchmove’, and ‘touchend’ to handle user interactions similar to mouse wheel events.
How can I detect mouse wheel events in Firefox?
Firefox fully supports the standard ‘wheel’ event, so you can detect mouse wheel events in Firefox in the same way as in other modern browsers. However, Firefox does not support the non-standard ‘mousewheel’ event.
Can I use jQuery to handle mouse wheel events?
Yes, you can use jQuery to handle mouse wheel events. jQuery provides the ‘on’ method which you can use to attach an event handler function for the ‘wheel’ event. Here’s an example:$(element).on('wheel', function(event) {
console.log('Wheel event detected!');});
How can I simulate a mouse wheel event for testing purposes?
You can simulate a mouse wheel event by creating a new ‘WheelEvent’ object and dispatching it using the ‘dispatchEvent’ method of the target element. Here’s an example:var event = new WheelEvent('wheel', {deltaY: 100});element.dispatchEvent(event);
In this code, a ‘wheel’ event with a ‘deltaY’ of 100 (indicating a scroll down) is dispatched on the target element.
Craig BucklerCraig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.
