1

我目前正在研究平滑的水平鼠标滚轮滚动，而 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);
4

1 回答 1

1

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

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

演示：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);
于 2013-10-31T11:58:15.707 回答