Question

I'm trying to make a function that calls other functions when the mousewheel moves in different directions. I don't have any idea as to how to implement this

I originally set up the code to be able to work with the mousewheel event, but Firefox doesn't support the mouswheel event. So I need a way to do it with DOMmouseScroll as well. If anyone could I'd like it to be set up in a similar way that I already set it up.

NOTE: I am asking for both DOMmouseScroll and mousewheel to be used, so I suggest adding to my code, but if it can't be done that way, it'll be fine...

Here is the way I set up the code:

$( '#container' ).on( 'mousewheel', function ( event ) {

    // crude check to see events are supported
    if ( typeof event.originalEvent.wheelDeltaX === 'undefined'
        || typeof event.originalEvent.wheelDeltaY === 'undefined' ) {
        console.log( "could not find mouse deltas" );
        return;
    }

    var deltaX = event.originalEvent.wheelDeltaX;
    var deltaY = event.originalEvent.wheelDeltaY;

    var scrolledLeft = deltaX < 0;
    var scrolledRight = deltaX > 0;
    var scrolledUp = deltaY < 0;
    var scrolledDown = deltaY > 0;

    if ( scrolledLeft ) { someFunction }
    if ( scrolledRight ) { someOtherFunction }
    if ( scrolledUp ) { anotherFunction }
    if ( scrolledDown ) { andAnotherFunction }
});
Was it helpful?

Solution

I would suggest re-implementing this using the cross-browser-compatible wheel event instead. mousescroll and DOMmousescroll have been deprecated in favor of this new event in modern browsers. Please read all of the documentation on that page for the details as well as an example implementation of a cross-browser-compatible addWheelListener function.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top