抖动的鼠标滚轮水平滚动

jittery mousewheel horizontal scrolling

本文关键字：水平 滚动 鼠标 抖动      更新时间：2023-09-26

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

我发现计算鼠标滚轮距离的最佳、最一致的方法是使用三个事件：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);
相关文章：