检测鼠标滚轮旋转的次数而不是旋转的长度

Question

我想为轮子旋转的次数而不是轮子旋转的长度制作一个 div 滚动。这可能吗？

例如如果用户旋转鼠标滚轮 x 长度，我需要传递一个值 10。此外，如果用户旋转鼠标滚轮 x/4 长度，我仍然需要传递值 10。

example:: 类似这样的东西 - 每次旋转时，值仅增加 1。

var i = 0;
$("#divD").on('scroll', function() {
  i++;
});

Answer 1

有这种效果的东西可能对你有用。尝试绑定鼠标滚轮。

var i = 0;
$(document).bind('mousewheel', function(){
    i++;
    $('div').text(i);
});

DEMO

此外，如果您想更进一步，您可以确定滚动方向。

var i = 0;
var u = 0;
var d = 0;
$(document).bind('mousewheel', function(e){
    i++;
    $('#all').text(i);
    if(e.originalEvent.wheelDelta > 0) {
        u++;
        $('#up').text(u);
    } else {
        d++;
        $('#down').text(d);
    }
});

DEMO

Answer 2

如果您想区分单独的连续滚动而不考虑滚动的持续时间，您可以unbind mousewheel 并在延迟后重新绑定。扩展@wrxsti 解决方案，它看起来像这样：

var i = 0;
var u = 0;
var d = 0;
$(document).bind('mousewheel', updateValues)

function updateValues(e){
    i++;
    $('#all').text(i);
    if(e.originalEvent.wheelDelta > 0) {
        u++;
        $('#up').text(u);
    } else {
        d++;
        $('#down').text(d);
    }
    $(document).unbind('mousewheel');
   setTimeout(function(){$(document).bind('mousewheel', updateValues)}, 500);
};

http://jsfiddle.net/g6enbeq2/2/