jQuery鼠标滚轮插件定制

我有一个全屏滑块，并希望启用使用鼠标滚轮的导航。为了检测鼠标滚轮事件，我认为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(向上/向下滚动)

最佳答案

如果我正确地理解了您的问题，那么您会发现这些事件触发得太频繁了。这里的问题是，对于任何给定的滚动操作，事件都会触发多次。如果在浏览器中打开开发人员控制台并执行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 ms)。我在此超时内移动了逻辑，以便它仅在滚动停止后才运行:

$(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鼠标滚轮插件定制，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31235526/