鼠标滚轮事件在火狐浏览器上无法使用

Question

以下代码在谷歌浏览器上运行良好，但是在火狐浏览器上由于某种原因无法正常运行。我还不知道是否缺少了什么？

$(window).bind('mousewheel', function(event) {
    if (event.originalEvent.wheelDelta >= 0) {
        $('#currentMove').html('Movement: Scroll up');
        $('#currentMove').css('background','#98FB98');
        scrollUp++;
        $('#scrollUp').html(scrollUp);

    }
    else {
        $('#currentMove').html('Movement: Scroll down');
        $('#currentMove').css('background','#FFB6C1');
        scrollDown++;
        $('#scrollDown').html(scrollDown);
    }
});

以下是我的fiddle链接：https://jsfiddle.net/w0wffbxc/ 请您协助查看并提出宝贵意见，谢谢。

- shifu

---

可能是 https://dev59.com/m2Qn5IYBdhLWcg3wgnPg 的重复问题。 - moon

可能是鼠标滚轮事件在Firefox浏览器中无法触发的重复问题。 - moon

Answer 1

这是您修复后的sqlfiddle。

您应该使用wheel，因为自Firefox 3版本以来，mousewheel不被Firefox认可。而且，使用wheel时，您应该使用event.originalEvent.deltaY代替。

- Steve Chamaillard

Answer 2

使用滚轮事件代替。这已经成为了更加标准的方式。此页面还提供了旧版浏览器的polyfill解决方案https://developer.mozilla.org/en-US/docs/Web/Events/wheel

示例：

$(window).on('wheel', function(event){

    // deltaY obviously records vertical scroll, deltaX and deltaZ exist too
    if(event.originalEvent.deltaY < 0){
        // wheeled up
        console.log("Works Up");
    }
    else {
        // wheeled down
        console.log("Works Down");
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

- Hey24sheep