Disable Mouse-wheel to scroll up or down
Solution 1
Case of preventing mouse scroll down (for mouse scroll up just change comparison operator to '<'):
$(window).on("wheel mousewheel", function(e){
if(e.originalEvent.deltaY > 0) {
e.preventDefault();
return;
} else if (e.originalEvent.wheelDeltaY < 0) {
e.preventDefault();
return;
}
});
We need to check for two values because of cross-browser issues.
P. S. Warning. Since later versions of Chrome decides to treat all window events as passive by default, the code above won't work in Chrome. Will come with a better solution and update this answer ASAP.
Solution 2
This code works for div with id "mydiv". You can change the mydiv to the body or any other element you want. The code works in all browsers.
JS:
var mydiv = document.getElementById("mydiv");
if (mydiv.addEventListener) {
// IE9, Chrome, Safari, Opera
mydiv.addEventListener("mousewheel", MouseWheelHandler, false);
// Firefox
mydiv.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
}
// IE 6/7/8
else
mydiv.attachEvent("onmousewheel", MouseWheelHandler);
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)));
if(delta==1) // if mouse scrolls up
{
alert('up');
}
if(delta==-1) // if mouse scrolls down, we disable scrolling.
{
e.preventDefault();
e.stopPropagation();
return false;
}
return false;
}
NOTE: Remember to set overflow to auto or scroll for this function to work.
A working example: Click Here
Hope this helps.
Comments
-
Bondsmith almost 2 years
I have two pages, these are the conditions I cannot achieve, please let me know if it is not possible.
In one page, I need to disable the mouse-wheel to scroll up. So when I scroll up with mouse-wheel nothing happens, but when I scroll down the page scrolls.
In the other page, I want the exact opposite, I need to disable the scrolling down on mouse-wheel. So when I scroll down nothing happens, but when I scroll up the page scrolls.
This is all i really need, but if you think I need to explain more, please let me know, thank you.