マウスホイール について

javascript

マウスホイール について

これまでDOM要素をドラッグ&ドロップについて試しましたが、
マウスの操作としてホイールのコントロールについて、javascriptでどのように制御できるのか試してみます。

ホイールのイベントハンドラは、ブラウザごとに完全に同一ではないので、
実装時にはどんなイベントハンドラが、何のブラウザで「有効か無効か」に注意する必要があります。

ホイールのイベントハンドラの一つとして「mousewheel」がありますが、これは現在は非推奨になっています。
構文としては以下のように書きます。

addEventListener('mousewheel', (event) => {});

もしくは

onmousewheel = (event) => { };

ただし、このイベントは非推奨であることと、ブラウザによってサポートされていないブラウザ(firefox)があるので、
おおよそ実用的なイベントとは言えません。

また、DOM level3の仕様では「wheel」という名前で提唱されています。

このイベントは構文としては次のように書きます。

document.addEventListener("wheel", function(event) {
    console.log("wheel start");
});

この簡単な記述を、HTML内に記載し画面表示をすると、マウスのホイールを取得して、
イベントが発火していることがわかります。

console.logで確認する方法でもいいのですが、都度、開発者ツールを開いて確認する手間もあるので、
画面上にイベント内容を出力するようにしました。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
<style type="text/css">
body, html {
	overflow: hidden;
}
#disp_mouse_wheel {
	position: absolute;
	height: 500px;
	width: 300px;
	background-color: #c0e5ff;
	overflow-y: scroll;
}
</style>
</head>
<body>

マウスホイールの「wheel」イベント情報を表示する
<div id="disp_mouse_wheel"></div>

<script type="text/javascript">
document.addEventListener("wheel", function(event) {

	// 開発者ツールで表示する
    console.log("event Delta -> " + event.wheelDelta);

	// 画面上のDOM要素を取得
	let disp_mouse_wheel = document.getElementById("disp_mouse_wheel");
	disp_mouse_wheel.innerHTML = event.wheelDelta + "<br />" + disp_mouse_wheel.innerHTML;
});
</script>

</body>
</html>

サーバ上のHTMLはこちら(test1.html)

画面にアクセスし、マウスホイールを上下に回転すると、イベントハンドラの wheelDelta プロパティが取得できます。

画面のイベント情報を表示する領域に、このwheelDeltaプロパティの値を出力すると
「120」や「-120」といった数値が出力されます(chrome、firefoxで確認済)。
現在はブラウザのサポート状況は「Safari on iOS」だけは非対応となっています。
「Safari on iOS」以外のブラウザではほとんどのブラウザで動作します。

値とホイールの回転方向については、次のとおりです。

マウスホイールを下方向に回転した時:-120
マウスホイールを上方向に回転した時:120

画面上でマウスホイールを操作すると、上記の値が1スクロール(マウスにもよりますが、1ホイール)ごとに
取得できることがわかります。

ホイールイベントのdeltaX、deltaY、deltaZ、プロパティについて

上記のHTMLを基に、ホイール操作時のイベントのプロパティである

deltaX
deltaY
deltaZ

の値を出力してみて、実際にどのような値が取得できるのかを試してみます。

deltaX  水平方向のスクロール
deltaY  垂直方向のスクロール
deltaZ  Z軸方向のスクロール

上記のプロパティの値を把握しやすいように、簡単なサンプルHTMLを用意しました。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
<style type="text/css">
body, html {
	overflow: hidden;
}

.title {
	width: 200px;
	top: 10px;
	margin-left: 5px;
	float: left;
}	

#disp_mouse_wheel {
	position: absolute;
	height: 500px;
	width: 200px;
	top: 30px;
	background-color: #c0e5ff;
	overflow-y: scroll;
}

#disp_mouse_wheel_deltaX {
	position: absolute;
	height: 500px;
	width: 200px;
	top: 30px;
	left: 210px;
	background-color: #c0e5ff;
	overflow-y: scroll;
}

#disp_mouse_wheel_deltaY {
	position: absolute;
	height: 500px;
	width: 200px;
	top: 30px;
	left: 420px;
	background-color: #c0e5ff;
	overflow-y: scroll;
}

#disp_mouse_wheel_deltaZ {
	position: absolute;
	height: 500px;
	width: 200px;
	top: 30px;
	left: 630px;
	background-color: #c0e5ff;
	overflow-y: scroll;
}
</style>
</head>
<body>

<div class="title">wheel</div>
<div id="disp_mouse_wheel"></div>

<div class="title">deltaX</div>
<div id="disp_mouse_wheel_deltaX"></div>

<div class="title">deltaY</div>
<div id="disp_mouse_wheel_deltaY"></div>

<div class="title">deltaZ</div>
<div id="disp_mouse_wheel_deltaZ"></div>

<script type="text/javascript">
document.addEventListener("wheel", function(event) {

	// 開発者ツールで表示する
    console.log("event Delta -> " + event.wheelDelta);
    console.log("event deltaX -> " + event.deltaX);
    console.log("event deltaY -> " + event.deltaY);
    console.log("event deltaZ -> " + event.deltaZ);

	// 画面上のDOM要素を取得
	let disp_mouse_wheel = document.getElementById("disp_mouse_wheel");
	disp_mouse_wheel.innerHTML = event.wheelDelta + "<br />" + disp_mouse_wheel.innerHTML;

	let disp_mouse_wheel_deltaX = document.getElementById("disp_mouse_wheel_deltaX");
	disp_mouse_wheel_deltaX.innerHTML = event.deltaX + "<br />" + disp_mouse_wheel_deltaX.innerHTML;

	let disp_mouse_wheel_deltaY = document.getElementById("disp_mouse_wheel_deltaY");
	disp_mouse_wheel_deltaY.innerHTML = event.deltaY + "<br />" + disp_mouse_wheel_deltaY.innerHTML;

	let disp_mouse_wheel_deltaZ = document.getElementById("disp_mouse_wheel_deltaZ");
	disp_mouse_wheel_deltaZ.innerHTML = event.deltaZ + "<br />" + disp_mouse_wheel_deltaZ.innerHTML;

});
</script>

</body>
</html>

サーバ上のHTMLはこちら(test2.html)

画面にアクセスして、マウスホイールを操作すると、「wheel」プロパティと「deltaY」プロパティの
値が取得できることがわかります。(deltaXとdeltaZはマウスの形状により、取得できます)

一般的なマウスの形状は、縦(垂直)方向のスクロールなので、上記のうち deltaY の値が取得できることになります。
注意する点は wheelとdeltaYとでは、取得できる符号が逆になっている点です。
wheelが正の値を出力する時は、deltaYは負の値を出力しています。

また、ブラウザごとに取得できるdeltaYの値は異なります。

実際にchromeで試してみると次のような画面になります。

同じ操作をfirefoxで試すと次のような画面になります。

「deltaY」の値を確認すると、
chromeでは「166.66665649414062」「-166.66665649414062」等の値ですが、
firefoxでは「120」「-120」となり、ブラウザごとに値が違うことがわかります。

実際のプログラム実装時にはこの違いについて注意が必要です。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です