jittery mousewheel horizontal scrolling

Question

I'm currently working on a smooth horizontal mousewheel scroll and firefox is giving me quite a a bit of a headache.

basically, whenever one fires the mouse wheel event that would execute the scroll, firefox replies with very disparate values, as in a scroll which should fire negative events fires the odd positive value (i.e. 30, 40, 43, -20, 30, -4), especially on smaller movements. that results more or less in the opposite of the desired result, as you can imagine.

is there any way to avoid that? I've tried throttling it a little bit, but the loss of fluidity in the movement makes it a no go.

for reference, the code for the scroll:

var scroll = function(e, d){
  console.log(d);
   $('html, body').animate(
      {scrollLeft: '-=' + d},
      10
   );

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

$('html, body').bind('mousewheel', scroll);

Answer 1

I found that the best, most consistent way of calculating mousewheel distance is to use three events: mousewheel, MozMousePixelScroll and DOMMouseScroll.

The last two events are mozilla-specific and they are available in different FF versions. They are more precise than the mousewheel event, but you need to adjust the delta to normalize the speed. Here is some code I used in the past:

DEMO: http://jsfiddle.net/6b28X/

var distance = 0;

var scroll = function(e){
   e.preventDefault();
   var original = e.originalEvent,
       delta = 0,
       hasPixelEvent = false;

   // FF 3.6+
   if ( 'HORIZONTAL_AXIS' in original && original.axis == original.HORIZONTAL_AXIS ) {
       return; // prevents horizontal scroll in FF
   }
   if ( e.type == 'MozMousePixelScroll' ) {
       hasPixelEvent = true;
       delta = original.detail / -7;

   // other gecko
   } else if ( e.type == 'DOMMouseScroll' ) {
       if ( hasPixelEvent ) {
           return;
       } else {
           delta = original.detail * -3;
       }

   // webkit + IE
   } else {
       delta = original.wheelDelta / 7;
   }
   distance = Math.max(distance-delta, 0);
   window.scrollTo( distance, 0 );
}

$(window).bind('mousewheel MozMousePixelScroll DOMMouseScroll', scroll);