javascript - 为什么鼠标滚轮在 chrome 中有效，但在 firefox 中无效

Question

我目前正在使用 CSS 通过鼠标滚轮上下滚动弹出页面，但我无法在 FireFox 中使用它。由于某种原因，它目前在 Chrome 中工作，仅使用 overflow-x:hidden;和 overflow-y:auto;.

我已经尝试使用 jQuery 鼠标滚轮插件 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    
    }
}