使用 jQuery 来检测每个实例的鼠标滚动，而不是每次点击答案

【问题标题】：Using jQuery to detect a mouse scroll per instance, not per click使用 jQuery 来检测每个实例的鼠标滚动，而不是每次点击
【发布时间】：2014-05-28 18:17:57
【问题描述】：

我正在尝试做的是在用户向上或向下滚动时移动元素。我在一个名为 goTo() 的函数中有这个机制。我还试图通过使用变量来跟踪用户的位置。当用户向上或向下滚动时，变量向上或向下加一。这是我的函数到目前为止的样子：

$(window).on('DOMMouseScroll mousewheel', function(event){

 clearTimeout($.data(this, 'timer')); // NEW CODE 

 $.data(this, 'timer', setTimeout(function() { // NEW CODE

    if( event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0 )
    {
        --curScl;
        goTo(curScl);

    } else {
        ++curScl;
        goTo(curScl);
    }

 }, 250)); // NEW CODE 

});

更新：根据@Bart Jedrocha 的建议，我添加了一个setTimeout 包装器，以防止curSel 的值随着每次滚动而飙升。但是，在执行滚动和元素移动之间存在延迟。感觉非常不自然。有没有办法不拖延地做到这一点？

【问题讨论】：

标签： jquery scroll mousewheel

【解决方案1】：

虽然setTimeout 在技术上确实有效，但在用户滚动鼠标和页面滚动之间会有一点延迟。这感觉不自然并且令人讨厌。因此，我需要另一种解决方案。

var scl=0; // Create a variable

window.setInterval(function(){
   scl=0; // Reset this variable every 1.5 seconds
}, 1500);

$(window).on('DOMMouseScroll mousewheel', function (e) { 
// Detect movement on the scrollwheel anywhere in browser window

if(e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) {

    while(scl==0) { 
    // Create a while loop that only executes while your variable equals 0

        // CODE HERE            

        scl++; // Make your variable equal 1 after executing once
    }

} else {

    while(scl==0) { 
    // Same deal, but this time while the user scrolls down

       // CODE HERE

        scl++;
    }

}

});

这似乎没有问题。如果有人看到可以清理一下的地方，请告诉我。谢谢！

【讨论】：

为什么是while循环而不是IF检查？

【解决方案2】：

如果我理解正确，您正试图在滚动事件的 stop 处递增/递减 1。不幸的是，没有可以绑定到的 scrollStop 事件。您可以在事件处理程序中使用setTimeout 来防止变量在滚轮的每个刻度上增加。以this 为例。

【讨论】：

这行得通！ ……嗯。在移动滚轮和影响元素之间有一个暂停。

【解决方案3】：

您始终可以检查自上次调用事件以来经过的系统时间。

var c_time = 0;

$(window).on('DOMMouseScroll mousewheel', function(event){
    if(($.now() - c_time) > 500) //0.5s
    {
        c_time = $.now();
        //Do smthng there...
    }
});

【讨论】：