Element: wheel イベント

wheel イベントは、ユーザーがポインティングデバイス（通常はマウス）のホイールボタンを回転させたときに発行されます。トラックパッドやマウスボールなど、ホイール操作をシミュレートする関連機器でも使用されます。

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

wheel イベントと scroll イベントを混同しないでください。

• wheel イベントは、必ずしも scroll イベントを送信するわけではありません。例えば、要素がまったくスクロールできない場合もあります。ホイールやトラックパッドを使用したズーム操作も、 wheel イベントを送信します。
• scrollイベントは、必ずしもwheelイベントによって引き起こされるわけではありません。 要素は、キーボードや、スクロールバーのドラッグ、 JavaScript を使用することでもスクロールすることができます。
• wheel イベントの delta* 値は必ずしもコンテンツのスクロール方向を反映しているとは限りません。

したがって、スクロールの方向を取得するために、 wheel イベントの delta* プロパティに頼らないようにしてください。代わりに、 scroll イベント内のターゲットの scrollLeft や scrollTop の値の変化を検出するようにしてください。

wheel イベントはキャンセル可能です。イベントがキャンセルされた場合、スクロールやズームは実行されません。このため、実際にコンテンツのスクロールを実行する前に、ブラウザーがすべてのホイールイベントの処理を待機する必要が生じ、パフォーマンス上の問題が発生する可能性があります。これを回避するには、 passive: true を設定して addEventListener() を呼び出します。こうすると、ブラウザーがキャンセル不可能な wheel イベントを生成する可能性があります。

addEventListener("wheel", (event) => {});

onwheel = (event) => {};

<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(0.125, scale), 4);

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

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

el.addEventListener("wheel", zoom, { passive: false });