jQuery中鼠标滚轮的问题答案

【问题标题】：Problems with mousewheel in jQueryjQuery中鼠标滚轮的问题
【发布时间】：2013-08-01 17:14:16
【问题描述】：

我在头部有以下代码：

<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 的速度向下”。

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

感谢您的帮助！

【问题讨论】：

标签： jquery

【解决方案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 中找到了这个新代码，现在它可以在带有 jQuery 2.0.1 的 Chrome 和 Firefox 中运行（我已修复它）。问题是返回的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。

【讨论】：

【解决方案2】：

这是一个跨浏览器的解决方案：

var onMouseWheel = function(e) {
    e = e.originalEvent;
    var delta = e.wheelDelta>0||e.detail<0?1:-1;
    alert(delta);
}
$("body").bind("mousewheel DOMMouseScroll", onMouseWheel);

【讨论】：

【解决方案3】：

这意味着 delta 未定义，这可能意味着您没有包含正确的插件，或者将其包含在错误的位置。

不知道你下载的是什么，我现在用this试了一下，它是working fine。

如果您删除外部资源，它不会像您的情况那样工作。

【讨论】：

【解决方案4】：

适用于 jQuery 1.6.x，但不适用于 jQuery 1.7.x
好像 jQuery 出了点问题。

【讨论】：