Element: wheel イベント

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

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

バブリング あり
キャンセル
インターフェイス 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 の定義
草案

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
wheel eventChrome 完全対応 61Edge 完全対応 12Firefox 完全対応 17IE 完全対応 9
補足
完全対応 9
補足
補足 Internet Explorer only exposes the wheel event via addEventListener; there is no onwheel attribute on DOM objects. See IE bug 782835.
Opera 完全対応 48Safari 完全対応 7WebView Android 完全対応 61Chrome Android 完全対応 61Firefox Android 完全対応 17Opera Android 完全対応 45Safari iOS 完全対応 7Samsung Internet Android 完全対応 8.0

凡例

完全対応  
完全対応
実装ノートを参照してください。
実装ノートを参照してください。

関連情報