为什么mousewheel在chrome中无法工作，而在Firefox中却无法工作

Question

我目前仅使用鼠标滚轮即可使用CSS上下滚动弹出页面，但无法在FireFox中使用它。 由于某种原因，它目前只能在Chrome中运行，只是使用了overflow-x：hidden;。 并溢出-y：auto;。

我已经尝试使用jQuery Mousewheel插件jquery.mousewheel.min.js来使页面上下滚动，而侧面没有滚动条，但是，我无法使其正常工作。 Firefox是否还需要其他功能才能仅使用鼠标滚轮上下滚动页面？ CSS，JavaScript还是jQuery？

HTML

<div class="test">
   <div class="inner">blah blah blah
   </div>
</div>

CSS

.test{
display:inline-block;
overflow-x:hidden;
overflow-y:auto;
margin:0 auto;
}

.inner{
float:left;
overflow-x:hidden;
overflow-y:auto;
}

Answer 1

如果您正在谈论使用纯JavaScript处理鼠标滚轮事件，我相信Firefox可以使用一个不同的名称： DOMMouseScroll因此要通用捕获它，您可以执行以下操作：

if (document.addEventListener) {
    document.addEventListener("mousewheel", MouseWheelHandler, false);
    document.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
}
else {
    document.attachEvent("onmousewheel", MouseWheelHandler);
}   

function MouseWheelHandler(e) {

    var e = window.event || e;
    var delta = e.wheelDelta

    if (delta < 0) {
        // Do stuff when wheel is scrolled down
    } else {
        // Do stuff when wheel is scrolled up    
    }
}

Answer 2

您提到您尝试使用jQuery mousewheel插件，但您的帖子中未提供任何JavaScript。 您是否正在尝试以编程方式（使用DOM事件监听器）滚动元素？ 如果是这样，请注意Chrome仅在最近才添加了对标准'wheel'事件的支持（ https://code.google.com/p/chromium/issues/detail?id=227454 ），因此您可能不得不使用非标准的'mousewheel' '事件。