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

Question

I currently am using CSS to scroll up and down a popup page by just using the mousewheel, but I can't get it to work in FireFox. It currently works in Chrome for some reason just using overflow-x:hidden; and overflow-y:auto;.

I've tried using the jQuery Mousewheel Plugin jquery.mousewheel.min.js to get a page to scroll up and down without scrollbars on the side, but alas, I can't get it to work. Is there something else Firefox needs to be able to scroll up and down a page just using the mousewheel? Either CSS, Javascript or 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

If you're talking about handling mousewheel event in plain JavaScript, I believe Firefox has a different name for it: DOMMouseScroll so to catch it universally you can do something like:

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

You mentioned that you have tried using the jQuery mousewheel plugin, but you haven't provided any JavaScript in your post. Are you trying to programmatically (using DOM event listeners) scroll an element? If so, note that Chrome only recently added support for the standard 'wheel' event ( https://code.google.com/p/chromium/issues/detail?id=227454 ) so you may have to use the nonstandard 'mousewheel' event.