CODEWITHSUNDEEP
javascriptjquerycss
Keith
Keith

Reputation: 4137

why does mousewheel work in chrome but no in firefox

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;
}

Upvotes: 1

Views: 902

Answers (2)

Yuriy Galanter
Yuriy Galanter

Reputation: 39807

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    
    }
}

Upvotes: 1

Alexander Vieth
Alexander Vieth

Reputation: 876

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.

Upvotes: 0

Related Questions