Element: wheel イベント

wheel イベントは、ユーザーがポインティングデバイス (通常はマウス) のホイールボタンを回転させたときに発行されます。

このイベントは標準外、非推奨の mousewheel (en-US) イベントを置き換えるものです。

バブリング あり
キャンセル
インターフェイス WheelEvent
イベントハンドラープロパティ onwheel

注: wheel イベントと scroll イベントを混同しないでください。 wheel イベントの既定のアクションは実装固有のものであり、必ずしも scroll イベントを発行するわけではありません。その場合でも、ホイールイベントの delta* 値は必ずしもコンテンツのスクロール方向を反映しているとは限りません。したがって、スクロールの方向を取得するために、 wheel イベントの delta* プロパティに頼らないようにしてください。代わりに、 scroll イベント内のターゲットの scrollLeftscrollTop の値の変化を検出するようにしてください。

ホイールで要素を拡大縮小

この例は、マウス (またはその他のポインティングデバイスの) ホイールを使用して要素を拡大縮小する方法を示します。

<div>Scale me with your mouse wheel.</div>
body {
  min-height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

div {
  width: 105px;
  height: 105px;
  background: #cdf;
  padding: 5px;
}
function zoom(event) {
  event.preventDefault();

  scale += event.deltaY * -0.01;

  // Restrict scale
  scale = Math.min(Math.max(.125, scale), 4);

  // Apply scale transform
  el.style.transform = `scale(${scale})`;
}

let scale = 1;
const el = document.querySelector('div');
el.onwheel = zoom;

addEventListener による同等のもの

イベントハンドラーは addEventListener() メソッドを使用して設定することもできます。

el.addEventListener('wheel', zoom);

仕様書

仕様書 状態 備考
UI Events
wheel の定義
草案

ブラウザーの互換性

BCD tables only load in the browser

関連情報