Disable Mouse-wheel to scroll up or down

Question

I have two pages, these are the conditions I cannot achieve, please let me know if it is not possible.

1. 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.

2. 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.

Symptomatic

Not really, I need to disable separate directions of mouse-wheel. – Symptomatic

Answer 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.

jsFiddle link

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.

Sorn

Sorry, been awhile since i used this code. Corrected myself. Also, added a fiddle. – Sorn

Just tested your fiddle in Chrome and it seems to no longer work. – Scheld

Yes, unfortunately Chrome made all window events passive by default, which means they can't be prevented. I will come up with a better solution, and will leave a warning for a time being. – Sorn

Wraping all elements in a <div id='foo'> and using $('#foo').on('wheel', ...) will work. In this way you may even specify which parts are not scrollable. – Teflon

Answer 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.

Uyekawa

This is working but some edits are needed (1) var e = window.event || e; // if you use "var" you rewrite the variable that is used in the argument (2) you need to compare with strict comparison the delta value (like delta=== 1) – Netsuke

Answer 3

You could try this to disable mouse scroll. I understand this is not as per your question but I believe it could help you.

JS:

function disableMouseScroll() {
    return false;
}
document.onmousewheel=disableMouseScroll;

Link

Letrice

@TheLittlePig Thanks Man but just for your information, recently I had done this disabling mouse scroll. So I thought to put my answer as much as I know and I posted it. I believe its not about copy paste thing, its about helping others in any way. – Letrice