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 ?

score 49 · Answer 1 · edited Apr 21 '17 at 19:00

49

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.

edited Apr 21 '17 at 19:00

Charlie

8,530
2
55
53

answered Feb 05 '17 at 23:19

Louis Ameline

2,779
1
25
25

1

This works great, thanks! I added the note about the difference in magnitude – Charlie Apr 14 '17 at 08:37
@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. – Louis Ameline Apr 14 '17 at 15:45
Unfortunately some uses for scroll wheels don't involve scrolling so detecting scroll distance won't help. – Charlie Apr 14 '17 at 20:47
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. – Louis Ameline Apr 15 '17 at 04:54
I thought you were saying other questions were using the scrolltop or something to determine the scroll distance – Charlie Apr 15 '17 at 14:52
You should probably refine or delete your note. Next time, a comment would be welcome before actually editing an answer. Thank you though – Louis Ameline Apr 15 '17 at 21:46
I don't follow, what do you mean? – Charlie Apr 16 '17 at 01:28
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. – Louis Ameline Apr 21 '17 at 09:01
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 – Charlie Apr 21 '17 at 19:01
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 Apr 23 '17 at 13:45
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 – Louis Ameline Apr 23 '17 at 13:49
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. – Charlie Apr 23 '17 at 18:16
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. – Louis Ameline Apr 24 '17 at 05:19
its still the solution in both chrome and firefox until this date. – M.R.Safari Jun 21 '18 at 05:05
what would be the vanilla js equivalent of this solution? – saibbyweb Nov 29 '18 at 08:21
2

@saibbyweb `document.onwheel = function(event){ console.log('wheel event'); }` – Siphon Feb 28 '19 at 16:37

score 27 · Accepted Answer · answered May 28 '13 at 10:20

27

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

answered May 28 '13 at 10:20

Mahmoud Badri

1,256
14
24

score 20 · Answer 3 · answered Mar 04 '15 at 07:42

20

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

answered Mar 04 '15 at 07:42

Alexander Shutau

2,660
22
32

score 14 · Answer 4 · edited Jul 26 '17 at 04:01

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/

Nice solution, perfect for my use case, thank you! :) – Ole Henrik Skogstrøm Aug 12 '15 at 16:37 — Ole Henrik Skogstrøm, Aug 12 '15 at 16:37

score 3 · Answer 5 · answered Feb 02 '16 at 23:59

3

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

answered Feb 02 '16 at 23:59

kdenis

43
7

'wheel' seems to be the prevailing single event these days, see Louis's answer – Charlie Apr 14 '17 at 08:37

score 2 · Answer 6 · answered May 28 '13 at 12:11

2

Or just use the jquery-mousewheel jQuery plugin.

answered May 28 '13 at 12:11

Vladimir Georgiev

1,949
23
26

1

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 https://developer.mozilla.org/en-US/docs/Web/Events/wheel#Listening_to_this_event_across_browser under the `// detect available wheel event` comment – thexpand Feb 01 '16 at 10:06

mousewheel event is not triggering in firefox browser

6 Answers6

Linked