In some cases, we wanted to handle mouse scroll events in JavaScript. In my case, one of my clients asked me to create an application that would fire in every mouse scroll. If you are new to JavaScript, this tutorial will help you understand how to handle mouse scroll events in different browsers.

Let’s get started

First, let’s create a function that runs whenever the mouse scroll event is detected. Let’s name the function mouseWheelEvent but you can name it to whatever you like. We will pass an event parameter into the function using variable e although we will not use this parameter in this tutorial but you will need that when you apply this into your future project. Just leave that for now. Then, let’s add an alert method into the function to let us know if the function is executed once the mouse scroll event is triggered.

function mouseWheelEvent(e) {
   alert ("Mouse scroll detected");
}

Let’s select an element where the mouse scroll event triggers by using document.getElementById("id") method. This means that whenever your mouse is inside the target element, the function will get executed once the mouse scroll is detected. Next, we will add the mousewheel event into the element and attach our function into the event using addEventListener method.

var Selector = document.getElementById("elementId");
Selector.addEventListener("mousewheel", mouseWheelEvent, false);

Not working in Firefox?

Unfortunately, Firefox uses different mouse wheel event. Gecko and older browsers does not support mousewheel event. However, Firefox do have basic support for DOMMouseScroll event which act the same to mousewheel event. This event is not supported by webkit and other browsers so it is safe to run the same event together.

var Selector = document.getElementById("elementId");
Selector.addEventListener("DOMMouseScroll", mouseWheelEvent, false);

Our code now will look like this.

var Selector = document.getElementById("elementId");
Selector.addEventListener("mousewheel", mouseWheelEvent, false);
Selector.addEventListener("DOMMouseScroll", mouseWheelEvent, false);

How about Internet Explorer 8 and older?

Internet Explorer 8 and older browsers does not support in any of the above events. Also IE 8 and below does not support addEventListener method so let’s find another option for older browsers. We will use the old attachEvent method with onmousewheel event.

Selector.attachEvent ("onmousewheel", mouseWheelEvent)

However, this method and event is no longer supported with new browser versions so we need to use conditional to use this.

var Selector = document.getElementById("elementId");
if (Selector.addEventListener) {
    Selector.addEventListener("mousewheel", mouseWheelEvent, false);
    Selector.addEventListener("DOMMouseScroll", mouseWheelEvent, false);
}
else
    Selector.attachEvent("onmousewheel", mouseWheelEvent);

To give you a basic idea on how to apply the code, open the demo link below and inspect the source code, and do a test run in different browser to see the code in action.