javascript - 无法使鼠标滚轮停在上方/下方的 Div 处

Question

当在桌面上查看时，我的 div 彼此重叠，并且不透明度链接到类，如下所示:

<div id="shell">
    <div class="box header is-active"></div>
    <div class="box not-active"></div>
    <div class="box footer not-active"></div>
</div>

我有一些jquery/javascript，可以处理用户使用箭头键“向上”和“向下”移动页面，每个操作调用一个特定的函数。

我还有一个函数可以检测鼠标滚动并调用向上或向下函数。

$(window).bind('mousewheel DOMMouseScroll', function(event) {
    if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
        preDiv();
    }
    else {
        nextDiv();
    }
});

它们都有效，但如果你滚动“太快”，你就会跳过下一部分。我怎样才能做到当你向上或向下滚动时，无论速度如何，它只跳一个div？

当然，还有一个 jfiddle 来展示我正在谈论的一些 css 和我正在使用的实际脚本:

https://jsfiddle.net/6d5nk79o/4/

Answer 1

您可以在鼠标滚轮后添加冷却时间间隔:

var cooldown = false;

$(window).bind('mousewheel DOMMouseScroll', function(event){
    if (cooldown)
        return;    

    cooldown = true;
    setTimeout(function() { cooldown = false; }, 1000);

    if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0)     {
        preDiv();
    }
    else {
        nextDiv();
    }
});

https://jsfiddle.net/dgwzaj36/