--- title: GlobalEventHandlers.onwheel slug: Web/API/GlobalEventHandlers/onwheel tags: - API - DOM - Event Handler - GlobalEventHandlers - Property - Reference - onwheel - プロパティ translation_of: Web/API/GlobalEventHandlers/onwheel ---
{{ ApiRef("DOM") }}

onscroll は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、 wheel イベントを処理する{{domxref("EventHandler", "イベントハンドラー")}}です。

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

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

構文

target.onwheel = functionRef;

値

functionRef は関数名または関数式です。この関数は引数として一つだけ、 {{domxref("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;

結果

{{EmbedLiveSample("Examples", 700, 400)}}

仕様書

仕様書 状態 備考
{{SpecName('HTML WHATWG','webappapis.html#handler-onwheel','onwheel')}} {{Spec2('HTML WHATWG')}}

ブラウザーの互換性

{{Compat("api.GlobalEventHandlers.onwheel")}}

関連情報