Question

我目前正在使用CSS通过鼠标滚轮向上和向下滚动弹出页面，但我无法在FireFox中使用它。它目前只能在Chrome中使用overflow-x：hidden;和overflow-y：auto;。

我已经尝试过使用jQuery Mousewheel插件jquery.mousewheel.min.js来获取一个页面，可以在没有滚动条的情况下向上和向下滚动，但是唉，我无法让它工作。有没有其他的东西需要能够只使用鼠标滚轮向上和向下滚动页面？ 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最近才添加了对标准“滚轮”事件（https://code.google.com/p/chromium/issues/detail?id=227454）的支持，因此您可能必须使用非标准“鼠标滚轮”事件。

为什么鼠标滚轮在chrome中工作但在firefox中不工作

2 个答案: