JavaScript | マウスホイールイベントを実装する方法

2020-06-11JavaScript,JavaScript イベント

JavaScript

JavaScriptでマウスホイールの操作情報を取得してイベントを実装する方法です。

マウスホイールの操作情報を取得する

JavaScriptでマウスホイールの操作・アクションを取得するには「window.onmousewheel」を利用します。

window.onmousewheel = function(event){
	console.log(event.wheelDelta);
}

取得したイベント情報は指定した変数にwheelDeltaとして格納されます。

マウスホイールアクションのイベント情報は、0を基準値とした正の数、負の数として取得できます。

上に回した場合:正の数
下に回した場合:負の数

マウスホイールの操作に合わせてイベントを実装する

マウスホイールを上に回したのか、下に回したのかを判別して分岐イベントを実装するサンプルコードです。

サンプルではゲーム作成時なんかで上に回した場合はズームイン、下に回した場合はズームアウトするなどの操作に使うときのデモコードです。

window.onmousewheel = function(event){
	if(event.wheelDelta > 0){
		//mainCamera.zoomTo(4, 100);
	}else{
		//mainCamera.zoomTo(1, 100);
	}
}

2020-06-11JavaScript,JavaScript イベント

Posted by Yousuke.U