firefox+jquery mousewheel scroll event bug

Question

UPDATE Working fix as suggested by David (see below):

replace

    $('.scrollMe').bind("mousewheel DOMMouseScroll", ...) 

with

    $('.scrollMe').bind("mousewheel DOMMouseScroll MozMousePixelScroll", ...) 

ORIGINAL POST

Firefox 16.0.2 (latest) shows an issue when binding the "mousewheel / DOMMouseScroll" event. Scrolling with the mousewheel while the mouse pointer is on top of my targeted div causes the window to scroll as well- whilst I obviously don't want this.

I tried adding several methods to stop propagation etc. but nothing seems to work.

Javascript code:

    $(document).ready(function() {
            $('.scrollMe').bind("mousewheel DOMMouseScroll", function(e) {
                e.stopImmediatePropagation();
                e.stopPropagation();
                e.preventDefault();

                var delta = parseInt(e.originalEvent.wheelDelta || -e.originalEvent.detail);

                $(this).empty();    
                return false;
            });
    });

To see it in action, please follow the jsFiddle link below. On the example page, simply place the mouse pointer inside the div with red boxes and use your mouse's scrollwheel. Firefox will scroll the parent window the first time (unexpectedly), whilst other browsers don't.

jsFiddle Code example

Peculiar is that Firefox doesn't repeat the behaviour once you fire the event on the bound element, meaning it stops scrolling the page. However, it does repeat this behaviour after you manually scroll the page afterwards and try again.

I've also tested this in IE9 and Chrome but couldn't detect this issue in those browsers (meaning they don't scroll the window unexpectedly), so I'm guessing it's Firefox-specific (also disabled every plugin in firefox etc.)

Is this truly a bug in firefox (and if so is there a cross-browser hack that might do the trick)? Or, if you know of any other solution to achieve the same effect of catching the mousewheel event without having the page's window scroll, please feel free to answer!

Answer 1

I can’t reproduce this bug in my FF 16.01 OSX using a touch pad (the Fiddle works fine), but I do know that there is another mozilla-specific event called MozMousePixelScroll. You might want to try to involve that as well.

There is also more information avail at MDN: https://developer.mozilla.org/en-US/docs/DOM/DOM_event_reference/DOMMouseScroll

As a sidenote, I think stopping the default action using e.preventDefault() should be enough, no need to stop the propagations as well (unless there are other IE specific bugs).

Answer 2

Reading https://developer.mozilla.org/en-US/docs/DOM/DOM_event_reference/DOMMouseScroll it seems MozMousePixelScroll DOMMouseScroll was for firefox 16 or earlier. For firefox >17 use the wheel event.

$(document).ready(function() {
        $('.scrollMe').bind("wheel mousewheel", function(e) {
            e.preventDefault();

            var delta = parseInt(e.originalEvent.wheelDelta || -e.originalEvent.detail);

            $(this).empty();    
            return false;
        });
});

Answer 3

This answer on this question, has the most browsers compatible solution I have found:

How to detect scroll direction

 $('#elem').on( 'DOMMouseScroll mousewheel', function ( event ) { 
    if( event.originalEvent.detail > 0 || event.originalEvent.wheelDelta < 0 ) { //alternative options for wheelData: wheelDeltaX & wheelDeltaY
        //scroll down
        console.log('Down');
      } else {
        //scroll up
        console.log('Up');
      }
      //prevent page fom scrolling
      return false;
    });

Answer 4

This answer is a crossbrowsing solution on Chrome, Firefox and iExplorer

var handlerMousewheel = function(){
		$(".item").on("wheel mousewheel", function(event) {
			event.preventDefault();
				var deltaY = event.originalEvent.deltaY;
				var wheelDeltaY = event.originalEvent.wheelDeltaY;

				 if( deltaY == 100 && wheelDeltaY == -120 || deltaY > 0 && wheelDeltaY == undefined ) {
			   		$(".wrapper").animate({"margin-left":"0%"},{duration:100});
				 }else if(deltaY == -100 && wheelDeltaY == 120 || deltaY < 0 && wheelDeltaY == undefined){
			      $(".wrapper").animate({"margin-left":"50%"},{duration:100});
				 }
	
		});
	}
  handlerMousewheel();

.container{
  display:block;
  width:100%;
  height:200px;
  overflow-x:hidden;
  overflow-y:scroll;
  background-color: grey;  
}
.wrapper{
  display:block;
  overflow:hidden;
  background-color:#a3cfef;
  padding: 2%;
  width:50%;
  margin:0 auto;
}
.item{
  width:100%;
  height:50px;
  margin:2px 0;
  display:block;
  overflow:hidden;
  border:3px solid #ad08a6;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="wrapper">
    <div class="item"></div>    
    <div class="item"></div>    
    <div class="item"></div>    
    <div class="item"></div>    
    <div class="item"></div>    
    <div class="item"></div>    
    <div class="item"></div>    
  </div>
</div>

https://jsfiddle.net/rrubio/ncLjgwy0/