GlobalEventHandlers.onwheel

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

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

メモ: onwheel を onscroll と混同しないようにしてください。 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 の定義		 現行の標準

ブラウザーの互換性

BCD tables only load in the browser

関連情報