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/

Answer 2

如果您将功能更改为需要最后一跳的最小累计wheelDelta金额，那么您的代码将会感觉更少...头发触发。这应该有助于对抗触摸板上的意外滚动等。

无法使鼠标停在Div上方/下方

2 个答案: