3

I use this code in other projects and it works fine. I don't know what is wrong in my code. It works fine in Chrome but not in Firefox.

This is my code:

$('body').on({
  'mousewheel': function(e) {
    e.preventDefault();
    e.stopPropagation();
  }
});
body {
  height: 5000px;
}
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

Example jsFiddle.

The jQuery version in my project is 1.11.3.

honk
  • 9,137
  • 11
  • 75
  • 83
Aram Mkrtchyan
  • 2,690
  • 4
  • 31
  • 47

3 Answers3

3

you could take CSS approach with:

body {
    max-height: 100%;
    overflow: hidden;
}

or here's what i have working in Firefox:

document.addEventListener('DOMMouseScroll', function(e){
    e.stopPropagation();
    e.preventDefault();
    e.cancelBubble = false;
    return false;
}, false);

you can see my example here: https://jsfiddle.net/qn75a76q/1/

Sonny Prince
  • 1,094
  • 7
  • 15
3

Some browsers have there default "scroll-overflow" not on the body. Instand it is on html or document. Try $('html') or $(document) for example. That could help

Time to Travel
  • 142
  • 1
  • 9
2

I quote this from another answer:

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

Original answer here: Mousewheel event not triggered in Firefox

Community
  • 1
  • 1
Florian Rachor
  • 1,574
  • 14
  • 31