Horizontal mouse events for spinning the left and right wheels

Question

I use the jQuery mousewheel plugin to trigger different actions for each left and right wheel.

Horizontal Scrolling The Apple Magic Mouse has the same effect as the main trackpad for laptops, which you use with two fingers to scroll left and right.

And this left and right scroll action launches the page back and forth in the story. This happens in all major browsers (Safari, Chrome, Opera and Firefox).

To do this, I need to preventDefault scroll only along the horizontal (deltaX) scroll.

I cannot turn off horizontal rotation by default without disabling vertical rotation as well.

Here is a violin reproducing the problem. Please go to it and shoot with horizontal scrolling of the horizontal mouse wheel or trackpad.

http://jsfiddle.net/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 that I am adding some comments inside the code that help to better understand my problem.

Basically all I need is something like preventDefault on the horizontal wheel and keep the vertical wheel default.

More than 30 hours of finding a solution without success, so I will be grateful for any help, now I really have no options.

New violin with 99% solution based on Niklas Nigren’s answer.

http://jsfiddle.net/9VbgF/

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

Answer 1

Fiddle: http://jsfiddle.net/YfwXw/1/

You do preventDefault on all mouse events. Wrap it in your if statement, and it will work:

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