【JavaScript】wheel – マウスホイールの動作を検知して処理を実行するためのイベント

JavaScriptのwheelイベントは、マウスホイールの動作を検知して処理を実行するためのイベントです。ページスクロールの制御やカスタムのスクロール効果を実装する際に便利なイベントで、デスクトップ環境では特に頻繁に使用されます。今回は、wheelイベントの基本的な使い方から注意点までをまとめていきたいと思います。

目次非表示

wheelイベントとは？
基本的な使い方
1. イベントオブジェクトのプロパティ
2. 使用例
サンプルコード
1. スクロールによるズーム効果
使用時の注意点
さいごに

wheelイベントとは？

wheelイベントは、マウスホイールやタッチパッドのスクロール操作を検知するためのイベントです。スクロールの方向や量を取得できるため、ページのスクロールだけでなく、独自のインタラクションを実現する際にも活用できます。

デフォルトでは、wheelイベントはページのスクロールに関連付けられています。
イベントオブジェクトからスクロール量や方向を取得できます。
スムーズなスクロール処理を実現するには、適切なデバウンス処理を行う必要があります。

基本的な使い方

以下のように、要素にwheelイベントリスナーを追加して使用します。

JavaScript

element.addEventListener('wheel', (event) => {
  console.log('スクロール検知:', event.deltaY);
});

イベントオブジェクトのプロパティ

wheelイベントのイベントオブジェクトには、次のような重要なプロパティがあります。

deltaY: 縦方向のスクロール量（正値は下方向、負値は上方向）
deltaX: 横方向のスクロール量（正値は右方向、負値は左方向）
deltaMode: スクロール量の単位（1なら行単位、0ならピクセル単位）

使用例

次の例では、スクロール量をコンソールに表示します。

See the Pen wheel() by tones (@tonescodedesign) on CodePen.

JavaScript

const scrollArea = document.getElementById('scrollArea');

scrollArea.addEventListener('wheel', (event) => {
  console.log(`スクロール量: ${event.deltaY}`);
});

HTML

<div class="scroll-area" id="scrollArea">
  <p>この領域でマウスホイールを動かしてみてください。</p>
  <p>スクロールの動作が検知されます。</p>
  <p>サンプルのテキストを追加します。</p>
  <p>サンプルのテキストを追加します。</p>
  <p>サンプルのテキストを追加します。</p>
  <p>サンプルのテキストを追加します。</p>
</div>

CSS

.scroll-area {
  width: 300px;
  height: 200px;
  overflow: auto;
  border: 1px solid #ccc;
  padding: 10px;
}

このコードでは、指定した領域内でのスクロール動作を検知し、スクロール量をコンソールに出力します。

サンプルコード

スクロールによるズーム効果

以下は、wheelイベントを使って画像の拡大縮小を実現する例です。

See the Pen wheel() by tones (@tonescodedesign) on CodePen.

JavaScript

const image = document.getElementById('zoomImage');
let scale = 1;

image.addEventListener('wheel', (event) => {
  event.preventDefault();

  // スクロール方向に応じて拡大縮小
  scale += event.deltaY * -0.01;
  scale = Math.min(Math.max(0.5, scale), 2); // 最小0.5倍、最大2倍に制限

  image.style.transform = `scale(${scale})`;
});

HTML

<div class="image-container">
  <img src="https://placehold.jp/150x150.png" alt="サンプル画像" id="zoomImage">
</div>

CSS

.image-container {
  width: 300px;
  height: 300px;
  overflow: hidden;
  border: 1px solid #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-container img {
  width: 100%;
  height: auto;
  transition: transform 0.1s;
}

このコードでは、マウスホイールの上下操作によって画像のズームイン・ズームアウトが行えます。

使用時の注意点

デフォルトの動作の抑制

wheelイベントをカスタマイズして使用する場合は、event.preventDefault()を適切に使用してブラウザのデフォルトのスクロール動作を無効化する必要があります。ただし、無効化しすぎるとユーザー体験を損なう可能性があるため、適切な場面で使用してください。

イベントの頻度に注意

wheelイベントは高頻度で発生するため、パフォーマンスに影響を与える場合があります。デバウンスやスロットリングを実装して、不要な処理を防ぎましょう。

JavaScript

let timeout;
window.addEventListener('wheel', (event) => {
  clearTimeout(timeout);
  timeout = setTimeout(() => {
    console.log('デバウンス処理: ', event.deltaY);
  }, 100);
});