初心者向けのjQuery入門講座|デザイナー向けのJavaScriptライブラリ
このエントリーをはてなブックマークに追加
索引
1章：小ネタ系
2章：ショーケース系
3章：カルーセル系

マウスホイール

サンプル紹介

左右のスクロールにも対応しています

マウスホイールはjQueryを利用しなくても取得できるのですが、ブラウザによって取得の方法が異なり対応が大変です。しかしjQuery mousewheelプラグインを利用することでブラウザを気にせず共通の方法でマウスホイールのイベントを取得できます。しかも上下だけでなく左右のスクロールにも対応しています。次回紹介する「カスタムスクロールバーに関するプラグイン」でも、このプラグインを利用します。

上の画像をクリックするとサンプルが開きます。このサンプルのブラウザウインドウ上でマウスホイールを操作してみて下さい（左右スクロールに対応したマウスをお持ちの方は左右スクロールも）。操作に応じて青い■が上下左右に移動します。

組み込み

jquery.mousewheel ver3.1.1著作権：MIT License
ダウンロードサイト：brandonaaron/jquery-mousewheel · GitHub
※リンク先に利用方法が記述されています。

htmlへの組み込みは以下の様に、jQuery同様scriptタグでリンクします。プラグインはjQueryのリンクより後に記述するようにしましょう。 

<script type="text/javascript" src="jquery.mousewheel.js"></script>

構文

「jquery.mousewheel」プラグインを組み込むと、以下のmousewheelイベントが追加されます。

マウスホイール操作時の処理を設定返値：jQueryオブジェクト
jQo.mousewheel( eo, 移動量, 横の移動量, 縦の移動量)
※eoはイベントオブジェクトです。第2引数の「移動量」は縦横共通の移動量で、どの方向にも反応します。

解説

セレクタ上のホイールイベントを取得します

mousewheelプラグインで勘違いしやすいのは、イベントの発生する場所です。ブラウザ上のすべて（つまりdocument）でイベントを取得できるわけではありません。セレクタで指定した要素上でだけイベントを取得できます。 サンプル（wheel/01.html）を開いて、body内にdiv要素があることを確認してください。

jQueryは以下の様に記述され、マウスホイールが操作されるとtextメソッドを利用してdiv要素上に移動量を表示します。 

$("div").mousewheel(function(eo, delta, deltaX, deltaY) {
	$("div").text(delta);
});

しかしブラウザ上でマウスホイールを操作してもdiv要素に何も表示されません。これはセレクタで指定した要素上でしかイベントを取得しないためです。クリックなども「セレクタの要素上でクリックした時のみ」なのと同じ事です。

では実際にdiv要素にマウスカーソルを重ねてからホイールを操作して下さい。表示しているのは第2引数のdeltaなので、縦横にかかわらず移動量が表示されます。

もしブラウザ上のすべてでイベントを取得したい場合はセレクタにdocumentを指定します。
サンプル（wheel/01b.html）を開いて、jQueryが以下の様に変更されていることを確認して下さい。 

$(document).mousewheel(function(eo, delta, deltaX, deltaY) {
	$("div").text(delta);
});

結果として、ブラウザ上のどこでホイールを操作してもdiv要素に移動量が表示されます。実際は次回紹介するカスタムスクロールのように、特定要素上でのみイベントを取得できればよいのでdocumentを指定することは少ないでしょう。

onでも利用できます

jquery.mousewheel.jsを組み込むと、onでmousewheelイベントを利用できるようになります。
サンプル（wheel/02.html）を開いてjQueryを確認して下さい。

以下の様にイベント部分にmousewheelを利用しています。次のセレクタにはdiv要素を指定しているので、このサンプルではdiv要素上でしかイベントを取得しません。 

$(document).on("mousewheel", "div", function(eo, delta, deltaX, deltaY) {
	$("div").text(delta);
});

結果としてサンプルwheel/01.htmlと同じように、div要素上でマウスホイールを操作するとdiv要素に移動量が表示されます。

上下左右に移動するサンプル

最後にマウスホイールを利用してdiv要素を上下左右に移動させるサンプルを紹介します。
サンプル（wheel/03.html）を開いてjQueryを確認して下さい。mousewheelイベントに設定したfunctionが以下の様に変更されています。 

$("div").offset(function(index,posObj){
	var myObj = new Object();
	myObj.top = posObj.top + deltaY;
	myObj.left = posObj.left + deltaX;
	return myObj;
})

offsetメソッドを利用するとdocumentからの相対的な位置を取得/変更できます。2行目で新しく設定する座標のオブジェクトを作成し、3行目でtop（上からの座標）を現在の座標（functionの引数「posObj」には現在の座標が渡されます）のtop位置に縦方向の移動量「deltaY」を足すことで移動するようにしています。4行目は同様に横方向について処理しています。

結果としてブラウザ上でマウスホイールを操作すると、div要素が上下左右に移動します。次回は、今回紹介した「jquery.mousewheel」を利用してカスタムスクロールバーを実現するプラグインを紹介します。