为什么鼠标滚轮在Chrome中工作，而在Firefox中不起作用

why does mousewheel work in chrome but no in firefox

本文关键字：工作 Firefox 不起作用 而在 Chrome 鼠标 为什么      更新时间：2023-09-26

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

我尝试使用 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;
}

如果你在谈论用普通的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    
    }
}

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

相关文章：