JavaScriptでマウスホイールの回転方向を検出する実装コード
JavaScriptでマウスホイールの回転方向（上・下）を検出するイベントの実装コードを生成します。
プレビュー
<p id="log">マウスホイールを回転させるとここに結果を表示します</p>window.addEventListener('wheel', (event) => {
// ログを表示する要素を取得
const log = document.querySelector('#log');
// event.deltaY がプラスなら下方向、マイナスなら上方向
if (event.deltaY > 0) {
log.innerText = '下方向に回転：' + Math.round(event.deltaY);
} else {
log.innerText = '上方向に回転：' + Math.round(event.deltaY);
}
}, { passive: true });機能・使い方
- マウスホイールの回転方向（上・下）を検出し、処理を分岐させるための実装コードです。
- 最新ブラウザの標準である `wheel` イベントを使用しています。
- プレビューエリア内でマウスホイールを動かすと、実際に判定ログが更新されます。
- `event.deltaY` の符号を確認することで、スクロールの方向を簡単に判定できます。
追加の情報
JavaScriptでホイール操作を扱う際、かつては mousewheel イベントや DOMMouseScroll イベントが使われていましたが、現在は標準化された
wheel イベントが推奨されます。
event.deltaY
は、下方向（奥方向）に回すと正の値（プラス）、上方向（手前方向）に回すと負の値（マイナス）となります。判定ロジックでは数値の大きさ自体よりも、0より大きいか小さいかを確認するのが一般的です。
また、イベントリスナーの第三引数に { passive: true } を指定することで、ブラウザのスクロールパフォーマンスを向上させることができます。
