javascript - Horizontal mousewheel events for left and right wheel spin - Stack Overflow

admin管理员组

文章数量:1429066

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

Share Improve this question Follow edited Aug 22, 2013 at 2:40 user229044♦ 240k4141 gold badges344344 silver badges347347 bronze badges asked Aug 13, 2013 at 7:17 StrobelStrobel 16711 silver badge1010 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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();
}

本文标签： javascriptHorizontal mousewheel events for left and right wheel spinStack Overflow