jQuery鼠标滚轮插件自定义

Question

我有一个全屏滑块，想启用鼠标滚轮导航。要检测鼠标滚轮事件，我认为 jQuery mousewheel 插件应该是最佳选择。

我能够包含它并触发功能。但是我无法（也没有找到任何资源）按照我想要的方式配置它。

我想检查一定数量的滚动像素。因此，例如，如果鼠标滚轮尝试滚动 20px up，我想触发一个功能，或者 20px down 尝试另一个功能。

$(document).ready(function(){
    $('body').bind('mousewheel', function(e){
        if(e.originalEvent.wheelDelta /120 > 0) {
            alert('Wait! I fire way too often!');
        }
        else{
            alert('We are going down, way too msuch alerts!');
        }
    });
});

JS FIDDLE（滚动Up/Down）

Answer 1

如果我对你的问题的理解正确，你会发现事件触发得太频繁了。这里的问题是对于任何给定的滚动操作，该事件都会触发多次。如果您在浏览器中打开开发人员控制台并执行 console.log(e.originalEvent.wheelDelta)，就可以看到这一点。这可能会将一个大滚动分解为几个小滚动事件，从而导致您想要的行为发生变化。我处理这个问题的方法是使用一个变量来保存滚动增量：

$(document).ready(function(){   
    var scrollPixels = 0; // variable to store scroll delta

    $('body').bind('mousewheel', function(e){
        // increment/decrement scroll delta
        scrollPixels += e.originalEvent.wheelDelta;
        console.log(scrollPixels);

        if (scrollPixels < -20) {
            scrollPixels = 0; // clear scroll delta
            alert('Coming down!');
        }
        else if (scrollPixels > 20){
            scrollPixels = 0; // clear scroll delta
            alert('Coming up!');
        }
    });
});

您可以在向上或向下警报触发后清除滚动增量。

JS Fiddle

您可能还想将测试增加到 20 像素以上，因为大多数卷轴都会触发此事件 - 20 像素仅约 1/4 英寸。

希望对您有所帮助。如果这不能解决您的问题，请随时评论我哪里出错了。祝你好运！

更新地址评论：

您可以通过设置超时来等待滚动停止，该超时将在滚动停止执行后等待很短的时间（本例中为 250 毫秒）。我将逻辑移入此超时，以便在滚动停止后它只会运行:

$(document).ready(function(){   
    var scrollPixels = 0; // variable to store scroll delta
    var scrolling; // timeout function var

    $('body').bind('mousewheel', function(e){
        // increment/decrement scroll delta
        scrollPixels += e.originalEvent.wheelDelta;
        console.log(scrollPixels);

        clearTimeout(scrolling);
        scrolling = setTimeout(function() {
        console.log('stop wheeling! ', scrollPixels);
        scrolling = undefined;

        if (scrollPixels < -300) {
            scrollPixels = 0; // clear scroll delta
            alert('Coming down!');
        }
        else if (scrollPixels > 300){
            scrollPixels = 0; // clear scroll delta
            alert('Coming up!');
        }

  }, 250);
    });
});

已更新JS Fiddle

jQuery鼠标滚轮插件自定义

jQuery mouse wheel plugin customization

jquery

mousewheel