javascript - 无法使鼠标滚轮在高于/低于Div处停止

当在桌面上查看时，我的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();
    }
});

它们都可以工作，但是如果您滚动“太快”，则可以跳过下一部分。我如何才能做到这一点，无论向上或向下滚动时，无论速度如何，它只会跳一个格？

当然，还有一个jfiddle来显示我在谈论某些CSS和我正在使用的实际脚本的含义：

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

最佳答案

您可以在鼠标滚轮之后添加一个冷却间隔：

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/