jquery - jQuery 中的鼠标滚轮问题

Question

我在 head 部分有以下代码:

<script type='text/javascript' src='/js/jquery.mousewheel.min.js'></script>

jQuery(function($) {
    $('#box').bind('mousewheel', function(event, delta) {
        var dir = delta > 0 ? 'Up' : 'Down',
        vel = Math.abs(delta);
        alert(dir + ' at a velocity of ' + vel);
        return false;
    });
});

在 Firefox 5 中什么也没有发生。在 Chrome 13 和 IE 9 中，无论我向哪个方向滚动，我都会得到“以 NaN 速度向下”。

我该如何解决这个问题？我想做的是检查用户是否向上滚动，或者向下滚动。

感谢您的帮助!

Answer 1

无法使用新的 jQuery 2.0.1...好吧，它可以工作，但不符合预期。此代码仅检测向下运动(这意味着负增量)。我已经尝试过这段代码，但结果始终是否定的:

var num = 0;

$('#container').bind('mousewheel DOMMouseScroll',function(e, delta) {
    if(delta > 0) {
        $("#output").text(++num);
    } else {
        $("#output").text(--num);
    }

    e.stopPropagation();
    e.preventDefault();
});

DOMMouseScroll 与 mousewheel 相同，但适用于 Firefox。

更正

我在这个 post 中找到了这个新代码现在它可以在 Chrome 和 Firefox 中使用 jQuery 2.0.1 工作(我已经修复了它)。问题是返回的 delta 值未定义。

function extractDelta(e) {
    if (e.wheelDelta) {
        return e.wheelDelta;
    }

    if (e.originalEvent.detail) {
        return e.originalEvent.detail * -40;
    }

    if (e.originalEvent && e.originalEvent.wheelDelta) {
        return e.originalEvent.wheelDelta;
    }
}

var num = 0;

$('#container').bind('mousewheel DOMMouseScroll',function(e) {
    var d = extractDelta(e);

    if(d > 0) {
        $("#output").text(++num);
    } else {
        $("#output").text(--num);
    }

    e.stopPropagation();
    e.preventDefault();
});

Container 和 output 只是两个空 div。