Javascript Disable Mouse Wheel

I occasionally need to block mouse wheel scrolling when I’m working with JavaScript. Of course, this is only momentary, such as when I need to display an overlay of some sort.

I usually use MooTools for my scripting needs, but frameworks can sometimes become a handicap. While it makes coding easy, it makes you dependent on it and then you forget the basics.

In this article, I will show you how to disable the mouse wheel by adding mousewheel events and how to remove them when you are done. Each line of code has comments to show which browsers need it.

Solid Tip: This script will not require a JavaScript framework and has been tested in Firefox, Chrome, Safari, IE7, and IE8.

Blocking the Mouse Wheel

document.onmousewheel = function(){ stopWheel(); } /* IE7, IE8 */
if(document.addEventListener){ /* Chrome, Safari, Firefox */
    document.addEventListener('DOMMouseScroll', stopWheel, false);
}
 
function stopWheel(e){
    if(!e){ e = window.event; } /* IE7, IE8, Chrome, Safari */
    if(e.preventDefault) { e.preventDefault(); } /* Chrome, Safari, Firefox */
    e.returnValue = false; /* IE7, IE8 */
}

Re-enabling the Wheel

document.onmousewheel = null;  /* IE7, IE8 */
if(document.addEventListener){ /* Chrome, Safari, Firefox */
    document.removeEventListener('DOMMouseScroll', stopWheel, false);
}

Notice my use of document in the instead of window when adding and removing the event. The IE versions would fail using window, but it does need window.event. Obviously, we would never expect IE to do it the easy way…

If this article helped you out, leave a comment!