mousewheel event not working on firefox

Question

Below code is working fine on chrome however it doesn't work on Mozilla for some reason that I am not aware yet. Am i missing something ?

$(window).bind('mousewheel', function(event) {
    if (event.originalEvent.wheelDelta >= 0) {
        $('#currentMove').html('Movement: Scroll up');
        $('#currentMove').css('background','#98FB98');
        scrollUp++;
        $('#scrollUp').html(scrollUp);

    }
    else {
        $('#currentMove').html('Movement: Scroll down');
        $('#currentMove').css('background','#FFB6C1');
        scrollDown++;
        $('#scrollDown').html(scrollDown);
    }
});

Here is my fiddle: https://jsfiddle.net/w0wffbxc/ Appreciate your help with this.

Answer 1

Here's your sqlfiddle fixed.

You should use wheel as mousewheel is not recognized by Firefox since version 3. Also with wheel, you should use event.originalEvent.deltaY instead.

Answer 2

Use wheel event instead. Its more of a standard now. This page also provides polyfills for old browsers https://developer.mozilla.org/en-US/docs/Web/Events/wheel

Ex

$(window).on('wheel', function(event){

    // deltaY obviously records vertical scroll, deltaX and deltaZ exist too
    if(event.originalEvent.deltaY < 0){
        // wheeled up
        console.log("Works Up");
    }
    else {
        // wheeled down
        console.log("Works Down");
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>