jQuery鼠标滚轮插件定制

时间:2015-07-05 22:17:11

标签: jquery mousewheel

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

1 个答案:

答案 0 :(得分:3)

如果我理解你的问题,你会经常看到事件发生。这里的问题是,对于任何给定的滚动动作,事件会多次触发。如果您在浏览器中打开开发人员控制台并执行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