2011年09月28日に投稿

[Javascript]各ブラウザでマウスホイールの操作を検知する

各ブラウザでマウスホイール操作を検知する方法が分かりましたので記事にします。検知する方法が各ブラウザで違うようなのでそれぞれのブラウザ用に条件分岐をする必要があります。下記のサンプルコードはIE6、IE7、IE8、Firefox、Chromeで動作確認しました。

ホイールが動かされたことを検知する

まずはマウスホイールが動かされたらhelloというメッセージを表示するだけの場合です。

Firefoxの場合はaddEventListenerというメソッドを使います。その関数の第一引数に文字列「DOMMouseScroll」を、第二引数にイベントを検知したときに実行する関数を、第三引数にはここではfalseを指定します。第三引数はuseCaptureを有効にするかどうかを指定するのですが、この第三引数についての詳しい説明は下記が参考になります。

JavaScript addEventListener() – とみぞーノート
http://wiki.bit-hive.com/tomizoo/pg/JavaScript%20addEventListener()

IEの場合はattachEventメソッドを使います。第一引数に文字列「onmousewheel」を、第二引数にイベントを検知したときに実行する関数を指定します。

Chromeの場合はwindowオブジェクトのonmousewheelプロパティにイベントを検知したときに実行する関数を登録します。

ホイールの操作量を取得する

次に、マウスホイールが動かされた量を表示する方法です。イベントを検知したときに実行する関数の引数にeが渡されていますが、このeにはイベントのオブジェクトが渡されています。このオブジェクトのプロパティにアクセスすることで、マウスホイールの動かされた量を知ることができます。

Firefoxではeオブジェクトのdetailプロパティに、IEとChromeではwheelDeltaプロパティで移動量を参照できます。私の環境ではFirefoxは上方向に動かすと-6、下方向に動かすと6が表示され、IEとChromeは上方向に動かすと120、下方向に動かすと-120が表示されました。移動量の数値がブラウザによって異なるので、計算で調整する必要がありそうです。

関連記事

Leave a Reply