如何让 MouseWheel 事件在 jQuery 中只触发一次？

Question

所以每次用户通过鼠标滚轮向上或向下滚动时，我只想触发一次函数。请参阅：jsFiddle Demo。问题是即使我有 e.preventDefault()，该函数仍然会触发多次。

目标是让函数在用户向上或向下滚动时仅触发一次。类似于这个site。

这是我目前的代码：

var sq = {};
sq = document;
if (sq.addEventListener) {
    sq.addEventListener("mousewheel", MouseWheelHandler(), false);
    sq.addEventListener("DOMMouseScroll", MouseWheelHandler(), false);
} else {
    sq.attachEvent("onmousewheel", MouseWheelHandler());
}

function MouseWheelHandler() {
    return function (e) {
        var e = window.event || e;
        var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
        if (delta < 0) {
            /* Scroll Down */
            e.preventDefault();
            console.log("Down. I want this to happen only once");

        } else {
            /* Scroll Up */
            console.log("up. I want this to happen only once");
            e.preventDefault();
        }
        return false;
    }
    return false;
}

Answer 1

This 帮助了我：

var isMoving=false;

$(document).bind("mousewheel DOMMouseScroll MozMousePixelScroll", function(event, delta) {
   event.preventDefault();
   if (isMoving) return;
   navigateTo();
});

function navigateTo(){
   isMoving = true;
   setTimeout(function() {
    isMoving=false;
   },2000);
}

基本上，您有一个 isMoving 变量，该变量取决于您的动画或您所做的任何事情是否正在进行中。即使用户在一次“轻弹”中使用鼠标滚轮滚动多次，该函数也只会触发一次。

Answer 2

   ​$(document).ready(function(){
var up=false;
var down=false;
        $('#foo').bind('mousewheel', function(e){
            if(e.originalEvent.wheelDelta /120 > 0 && up=false)  {
up=true;
down=false;
                $(this).text('scrolling up !');
            }
            elseif(e.originalEvent.wheelDelta /120 > 0 && down=false){
down=true;
up=false;
                $(this).text('scrolling down !');
            }
        });
    });

而here是一个可以使用的插件