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

2020-01-132022-02-06JavaScript イベント,JavaScript

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

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

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

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

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

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

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

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

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

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

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