GlobalEventHandlers.onwheel

onscrollGlobalEventHandlers ミックスインのプロパティで、 wheel イベントを処理するイベントハンドラーです。

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

メモ: onwheelonscroll と混同しないようにしてください。 onwheel は一般的なホイールの回転を扱うのに対し、 onscroll はオブジェクトの内容のスクロールを扱います。

構文

target.onwheel = functionRef;

functionRef は関数名または関数式です。この関数は引数として一つだけ、 WheelEvent オブジェクトを受け取ります。

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

HTML

<div>マウスホイールで拡大縮小します。</div>

CSS

body {
  min-height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

div {
  width: 80px;
  height: 80px;
  background: #cdf;
  padding: 5px;
  transition: transform .3s;
}

JavaScript

function zoom(event) {
  event.preventDefault();

  if (event.deltaY < 0) {
    // Zoom in
    scale *= event.deltaY * -2;
  }
  else {
    // Zoom out
    scale /= event.deltaY * 2;
  }

  // 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');
document.onwheel = zoom;

結果

仕様書

仕様書 状態 備考
HTML Living Standard
onwheel の定義
現行の標準

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
onwheelChrome 完全対応 61Edge 完全対応 12Firefox 完全対応 ありIE 完全対応 ありOpera 完全対応 48Safari 完全対応 ありWebView Android 完全対応 61Chrome Android 完全対応 61Firefox Android 完全対応 ありOpera Android 完全対応 45Safari iOS 完全対応 ありSamsung Internet Android 完全対応 8.0

凡例

完全対応  
完全対応

関連情報