I'm using jQuery mousewheel plugin to fire different actions for each left and right wheelspins.

The Apple Magic Mouse horizontal wheel scroll have the same effect as mostly laptops trackpad, which you use two fingers to scroll page left and right.

And that action of left and right scroll fires page back and forward on history. This happens in all major browsers(Safari,Chrome,Opera and Firefox).

That's why I need to preventDefault scroll only on horizontal(deltaX) scrolling.

I can't disable Default horizontal spin without disabling vertical too.

Here's a fiddle reproducing the issue, Please, access it and fire your horizontal mousewheel or trackpad horizontal scroll.

/

$(document).mousewheel(function(event, delta, deltaX, deltaY) {
    if (deltaX > 10){
        $(".square").addClass("animation");
    }else if(deltaX < -10){
        $(".square").removeClass("animation");
    }
    if (deltaY != 0){
        //Anything that makes vertical wheelscroll keeps normal
    }
    // I have to preventDefault only the horizontal scroll, otherwise page will go back or go forward in history
    event.preventDefault();
});

You can see I put some ments inside the code that helps you understand better my problem.

Basically all I need is something to preventDefault horizontal wheel action and keep the default vertical wheel.

More than 30 hours searching for solution without success, so I'll appreciate any help, I'm now really out of options.

New fiddle with solution 99% based on Nicklas Nygren answer.

/

if (deltaY == 0){
    event.preventDefault();
}

I'm using jQuery mousewheel plugin to fire different actions for each left and right wheelspins.

The Apple Magic Mouse horizontal wheel scroll have the same effect as mostly laptops trackpad, which you use two fingers to scroll page left and right.

And that action of left and right scroll fires page back and forward on history. This happens in all major browsers(Safari,Chrome,Opera and Firefox).

That's why I need to preventDefault scroll only on horizontal(deltaX) scrolling.

I can't disable Default horizontal spin without disabling vertical too.

Here's a fiddle reproducing the issue, Please, access it and fire your horizontal mousewheel or trackpad horizontal scroll.

http://jsfiddle/YfwXw/

$(document).mousewheel(function(event, delta, deltaX, deltaY) {
    if (deltaX > 10){
        $(".square").addClass("animation");
    }else if(deltaX < -10){
        $(".square").removeClass("animation");
    }
    if (deltaY != 0){
        //Anything that makes vertical wheelscroll keeps normal
    }
    // I have to preventDefault only the horizontal scroll, otherwise page will go back or go forward in history
    event.preventDefault();
});

You can see I put some ments inside the code that helps you understand better my problem.

Basically all I need is something to preventDefault horizontal wheel action and keep the default vertical wheel.

More than 30 hours searching for solution without success, so I'll appreciate any help, I'm now really out of options.

New fiddle with solution 99% based on Nicklas Nygren answer.

http://jsfiddle/9VbgF/

if (deltaY == 0){
    event.preventDefault();
}

• javascript
• jquery
• horizontal-scrolling
• mousewheel
• magic-mouse

1 Answer 1

Fiddle: http://jsfiddle/YfwXw/1/

You're doing preventDefault on all mousewheel events. Wrap it in your if statement instead and it will work:

if (deltaY != 0){
    // Anything that makes vertical wheelscroll keeps normal
} else {
    // Only prevent if scroll is not vertical
    event.preventDefault();
}