firefox+jquery mousewheel scroll event bug

Question

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

replace

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


        

Answer 1

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/

Answer 2

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 3

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 4

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