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との 3 つのイベントを使用することであることがわかりましたDOMMouseScroll。

最後の 2 つのイベントは 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 に答える