HTMLでマウスホイールイベントonmousewheelを処理する方法

スクロール ホイール イベントはブラウザによって若干異なります。Firefox などでは、addEventListener メソッドを使用して DomMouseScroll イベントをバインドすることもできます。詳しく説明します。

Firefox は DOMMouseScroll を使用し、他のブラウザはマウスホイールを使用します。スクロール イベントがトリガーされると、Firefox はdetail属性を使用してホイール情報を取得し、他のブラウザは WheelDelta を使用します。なぜ他のメーカーがこの問題に関して Microsoft とこれほど一致しているのかわかりません。 Firefox は、addEventListener メソッドを使用して DomMouseScroll イベントをバインドできます。

elem.addEventListener('DOMMouseScroll', func, false); IE およびその他の主流ブラウザは、従来のイベント バインディング モデルを使用できます。ただし、IE 独自のattachEvent メソッドは使用しないでください。他の主流ブラウザは Microsoft のメソッドを認識しません。

Firefoxのマウスホイールの上スクロールは-3、下スクロールは3

IEマウスホイールの上スクロールは120、下スクロールは-120

Safariマウスホイールの上スクロールは360、下スクロールは-360

Operaのマウスホイール上は 120 までスクロールし、下は -120 までスクロールします

Chrome のマウス ホイールは上まで 120 までスクロールし、下は -120 までスクロールします

誰かが Safari でテストを行いました。「円をスクロールするだけの場合、値は +-0.1 です。もう少し速くスクロールすると (さらに数回スクロールすると)、この値は大きくなります。これは、Mac OS では 1 回スクロールすると、ブラウザは 1 ピクセルスクロールし、3 回スクロールします。 30 ピクセルスクロールします。」同時に、彼は Camino (Gecko をベースにしたカーネル エンジン) についても研究しました。「Safari と同様 (+- 0.3 ～ +-Infinity)、Firefox と同じカーネル エンジンを使用していますが、デルタ値は + だけです」 -2.666666 Float、スクロール速度に関係なく

私のテストの後、IE/Opera は同じタイプです。attachEvent を使用してホイール イベント

/*IE注册事件*/ 
if(document.attachEvent){ 
  document.attachEvent('onmousewheel',scrollFunc); 
}

を追加します。

Firefox は addEventListener を使用してホイール イベント

を追加します。

/*Firefox注册事件*/ 
if(document.addEventListener){ 
  document.addEventListener('DOMMouseScroll',scrollFunc,false); 
}

Safari と Chrome は同じタイプで、HTML DOM を使用してイベントを追加できます

window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome

Firefox を除くすべてそのうちの 1 つは HTML DOM を使用してイベントを追加できるため、次のメソッドを使用してイベントを追加します

ホイールの互換性もブラウザで考慮する必要があります。現在、5 つの主要なブラウザ (IE、Opera、Safari、Firefox、Chrome) では、Firefox は詳細を使用し、他の 4 つのカテゴリは WheelDelta を使用します。この 2 つのカテゴリは値が一致していないだけであり、これらは同じ意味を持ちます。それぞれ 2 つの値をとり、detail は ±3 のみ、wheelDelta は ±120 のみをとり、正の数値は Up として表され、負の数値は Down を意味します

/*注册事件*/ 
if(document.addEventListener){ 
  document.addEventListener('DOMMouseScroll',scrollFunc,false); 
}//W3C 
window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome

。