DOM

：

：

Element：wheel イベント

　編集：2022.09.26 by T.A.

[Edge]。→

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

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

バブリング あり
キャンセル 可
インターフェイス WheelEvent
イベント ハンドラー プロパティ

Note： wheel イベントと scroll イベントを混同しないでください。wheel イベントの既定のアクションは実装固有のものであり、必ずしも scroll イベントを発行するわけではありません。その場合でも、ホイールイベントの delta＊ 値は必ずしもコンテンツのスクロール方向を反映しているとは限りません。したがって、スクロールの方向を取得するために、wheel イベントの delta＊ プロパティに頼らないようにしてください。代わりに、scroll イベント内のターゲットの scrollLeft や scrollTop の値の変化を検出するようにしてください。

例
ホイールで要素を拡大縮小／mdn

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

HTML： 

<div>Scale me with your mouse wheel.</div>

CSS： 

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

div {
  width: 105px;
  height: 105px;
  background: #cdf;
  padding: 5px;
}

JavaScript： 

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;

→Math.min()、Math.max()。

HTML： 

<DIV id=IdTest style="width:100px; background-color:#ddf">[DIV要素<B>[B要素]</B>]</DIV>

JavaScript： 

Scale=1; //倍率の初期値。
function Job(eve){      //ホイールが回された時の処理：eveには WheelEvent オブジェクトが入るようです。
  eve.preventDefault(); //ホイール本来のスクロール動作をさせないようにする。
  D=eve; //＝[object]：[object WheelEvent]
	//isTrusted＝[boolean]：true
	//deltaX＝[number]：0
	//deltaY＝[number]：100。又は -100（回転方向で異なる）
	//deltaZ＝[number]：0
	//deltaMode＝[number]：0
	//wheelDeltaX＝[number]：0
	//wheelDeltaY＝[number]：-120。又は 120（回転方向で異なる）
	//wheelDelta＝[number]：-120。又は 120（回転方向で異なる）
	//…
//  let E=eve.target;
  let E=eve.currentTarget;         //イベントが起きた要素を得る。
  Scale=Scale + (eve.deltaY/1000); //倍率の計算。
  E.style.transform="scale(" +scale+ ")"; //拡大縮小。
}
IdTest.onwheel=Job; //ホイールが回転した時のイベントを割り当てる。

→Event.preventDefault()、Event.target、Event.currentTarget、CSS：transform、CSS：scale()。

テスト