mousewheel event is not triggering in firefox browser

Question

Please refer the below code.

$(this.element).on("mousewheel", this.chartMouseWheel);

chartMouseWheel:function(e) {
        if(e.originalEvent.wheelDelta /120 > 0) {
            alert('scrolling up !');
        }
        else{
          alert('scrolling down !');
        }

        if (e.preventDefault)
        e.preventDefault();
        e.returnValue = false;
    },

this event triggering properly in IE,chrome and not triggering in Firefox ?

Solution 1

Firefox doesn't recognize "mousewheel" as of version 3. You should use "DOMMouseScroll" instead for firefox.

check this: http://www.javascriptkit.com/javatutors/onmousewheel.shtml

Solution 2

This is 2017 and the right answer is now:

$(window).on('wheel', function(event){

    // deltaY obviously records vertical scroll, deltaX and deltaZ exist too
    if(event.originalEvent.deltaY < 0){
        // wheeled up
    }
    else {
        // wheeled down
    }
});

Works with current Firefox 51, Chrome 56, IE9+

Note: The value of the deltas will depend on the browser and the user settings.

Solution 3

Use wheel event. This page also provides polyfills for old browsers https://developer.mozilla.org/en-US/docs/Web/Events/wheel

Solution 4

Badri is right, you should use "DOMMouseScroll" instead for firefox. Addition to this, for delta you need to use event.originalEvent.detail instead of event.originalEvent.wheelDelta. For down, event.originalEvent.detail gives positive value whereas event.originalEvent.wheelDelta gives negative value and vice versa.

 $(stage.content).on('mousewheel DOMMouseScroll', zoomHelper.zoom);   

 if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {
            if (event.originalEvent.detail > 0) {
                //scroll down
                delta = 0.2;
            } else {
                //scroll up
                delta = 0;
            }
        } else {
            if (event.originalEvent.wheelDelta < 0) {
                //scroll down
                delta = 0.2;
            } else {
                //scroll up
                delta = 0;
            }
        }

JSFiddle (Works in IE 11, Firefox 33 and Chrome 38, I did not test other browsers): http://jsfiddle.net/rpaul/ckwu7u86/3/

Solution 5

This seems to work in Safari, Chrome, and Firefox (I have not tested it in IE):

// For Chrome
window.addEventListener('mousewheel', mouseWheelEvent);

// For Firefox
window.addEventListener('DOMMouseScroll', mouseWheelEvent);

function mouseWheelEvent(e) {
  var delta = e.wheelDelta ? e.wheelDelta : -e.detail;
  console.log(delta);
}

From: http://www.h3xed.com/programming/javascript-mouse-scroll-wheel-events-in-firefox-and-chrome

View more solutions

Comments

[Ole Henrik Skogstrøm]

Nice solution, perfect for my use case, thank you! :)

[thexpand]

No need to load such a big library, because there is a native event, supported by most modern browsers. Listening for mousewheel, wheel and DOMMouseScroll is enough. You can read furthermore developer.mozilla.org/en-US/docs/Web/Events/… under the // detect available wheel event comment

[Charlie]

'wheel' seems to be the prevailing single event these days, see Louis's answer

[Charlie]

This works great, thanks! I added the note about the difference in magnitude

[Louis Ameline]

@charlie the value returned by Firefox is not in pixels I believe, and in any browser the values may be different anyway according to your own settings. There are other SO questions about getting the scrolled distance cross browser.

[Charlie]

Unfortunately some uses for scroll wheels don't involve scrolling so detecting scroll distance won't help.

[Louis Ameline]

Even when the page is not actually scrolled, the wheel delta (what I called the scrolled distance) is not 0. What I mean is that your note is not necessarily true.

[Charlie]

I thought you were saying other questions were using the scrolltop or something to determine the scroll distance

[Louis Ameline]

You should probably refine or delete your note. Next time, a comment would be welcome before actually editing an answer. Thank you though

[Charlie]

I don't follow, what do you mean?

[Louis Ameline]

I mean that your note is wrong, please delete it. For me, right here in this page, the deltaY is 33.33... or -33.33... when I scroll in Chrome, and 1 or -1 in Firefox. The value of the delta is not necessarily relevant for the question anyway. Next time, please post as a comment before editing.

[Charlie]

I've updated it to reflect the user settings. I typically avoid making comments because people don't read them and editing is a quicker path to people seeing content updates

[Louis Ameline]

I don't know if Stackoverflow has guidelines about this, I haven't found any, I'd be curious. But comments do exist on SO, so I tend to think they're intended for people to use them. I personaly always do, I think they're often very valuable. At least the author of the answer reads them, and may edit it per your suggestions. Here it would have avoided you posting wrong information on my behalf, just saying.

[Louis Ameline]

And since these comments here about moderation and the correction of your mistake are an off-topic discussion, could you please delete them all. Thanks

[Charlie]

It clearly states I edited the answer, I don't get any rep for my credit, I only do it to help others. I don't think there's any concern that someone will attribute my changes to you or that it might in some way reflect negatively on you. The comment topic went off course because of your insistence, I don't really know what you're trying to get out of deleted comments; I have no other way to communicate with you.

[Louis Ameline]

Your addition has its value, I'm not denying that, I'm merely pointing out that a you could have discussed with me first. Now my answer is cluttered with useless comments. If someone actually adds a useful comment, I'd like it to be visible by other users and not drowned in these. Because as I said, I care about comments and value them.

[M.R.Safari]

its still the solution in both chrome and firefox until this date.

[saibbyweb]

what would be the vanilla js equivalent of this solution?

[Siphon]

@saibbyweb document.onwheel = function(event){ console.log('wheel event'); }