Question

我目前正在制作一个平滑的水平鼠标滚轮，而firefox让我感到非常头疼。

基本上，每当一个人触发执行滚动的鼠标滚轮事件时，firefox就会回复非常不同的值，就像在一个应该触发负面事件的滚动中激发奇数正值（即30,40,43，-20， 30，-4），尤其是较小的动作。正如你想象的那样，这或多或少会产生与预期结果相反的结果。

有什么方法可以避免这种情况吗？我试过一点点扼杀它，但运动中流动性的丧失让它变得不行。

供参考，滚动代码：

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

我发现计算鼠标滚轮距离的最佳，最一致的方法是使用三个事件：mousewheel，MozMousePixelScroll和DOMMouseScroll。

最后两个事件是特定于mozilla的，它们有不同的FF版本。它们比mousewheel事件更精确，但您需要调整增量以标准化速度。这是我过去使用的一些代码：

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

抖动鼠标滚轮水平滚动

1 个答案: