지저분한 마우스 휠 수평 스크롤

Question

나는 부드러운 수평 마우스 휠 스크롤을 만들고 있으며, 파이어 폭스는 나에게 꽤 많은 두통을주고있다.

기본적으로 스크롤을 실행할 마우스 휠 이벤트가 발생할 때마다 firefox는 음수 이벤트를 발생시키는 스크롤에서 홀수 양수 값 (즉, 30, 40, 43, -20)을 발생시키는 것과 같이 매우 다른 값으로 응답합니다. , 30, -4), 특히 작은 움직임. 상상할 수 있듯이 원하는 결과의 반대쪽에 어느 정도 결과가 나타납니다.

피할 수있는 방법이 있습니까? 나는 그것을 약간 조절하려고 시도했지만, 움직임이 유동성을 잃어 버리면 아무 일도 일어나지 않습니다. 참조

, 스크롤에 대한 코드 : mousewheel, MozMousePixelScroll 및 DOMMouseScroll : 나는 마우스 휠의 거리를 계산하는 최고의, 가장 일관성있는 방법은 세 가지 이벤트를 사용하는 것으로 나타났습니다

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

.

마지막 두 이벤트는 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);