JavaScript - マウスホイールイベント

JavaScriptでマウスホイールの操作イベントを実装する簡単なコード例です。

HTMLには、マウスホイールのイベントを検出する対象として<div>タグにid名「target」を指定しています。

<div id="target">0</div>

CSSでは、マウスホイール操作の対象範囲とするためのサイズを設定しています。
また、マウスホイールのスクロール量を表示するためのテキストプロパティを指定しています。

#target {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
	color: white;
	width: 250px;
	height: 250px;
	border-radius: 50%;
	text-align: center;
	cursor: pointer;
	user-select: none;
	transition: 1s;
	font-size: 40px;
	background: #4169e1;
}

対象とする要素はquerySelector()で指定、addEventListener()の「wheel」を使ってマウスホイールイベントを実装しています。
preventDefault()にてブラウザがデフォルト動作でスクロールしないようにしています。

マウスホイールの操作時に現在までのスクロール量との合算値を対象の要素に表示します。

// マウスホイールイベントを実装
document.querySelector('#target').addEventListener('wheel', () => {
	// デフォルトの動作を実行しない
	event.preventDefault();
	// 現在までのマウスホイールのスクロール量に加算して表示
	let num  = parseInt(event.target.textContent);
	document.querySelector('#target').textContent = num + event.deltaY;
});