4

我正在使用 jQuery mousewheel 插件为每个左右轮转触发不同的操作。

Apple Magic Mouse 水平滚轮滚动具有与大多数笔记本电脑触控板相同的效果，您可以使用两根手指左右滚动页面。

左右滚动的动作会在历史上前后触发页面。这发生在所有主要浏览器（Safari、Chrome、Opera 和 Firefox）中。

这就是为什么我preventDefault只需要在水平（deltaX）滚动时滚动。

如果不禁用垂直，我也无法禁用默认水平旋转。

这是重现该问题的小提琴，请访问它并触发水平鼠标滚轮或触控板水平滚动。

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

您可以看到我在代码中添加了一些注释，以帮助您更好地理解我的问题。

基本上我需要的只是preventDefault水平轮动作并保持默认的垂直轮。

超过 30 小时寻找解决方案没有成功，所以我会很感激任何帮助，我现在真的没有选择。

基于 Nicklas Nygren 答案的 99% 解决方案的新小提琴。

http://jsfiddle.net/9VbgF/

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

1 回答 1

5

小提琴：http: //jsfiddle.net/YfwXw/1/

您正在preventDefault处理所有鼠标滚轮事件。将其包装在您的 if 语句中，它将起作用：

if (deltaY != 0){
    // Anything that makes vertical wheelscroll keeps normal
} else {
    // Only prevent if scroll is not vertical
    event.preventDefault();
}
于 2013-08-13T07:28:43.667 回答