Element: wheel イベント
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
wheel
イベントは、ユーザーがポインティングデバイス(通常はマウス)のホイールボタンを回転させたときに発行されます。トラックパッドやマウスボールなど、ホイール操作をシミュレートする関連機器でも使用されます。
このイベントは標準外、非推奨の mousewheel
イベントを置き換えるものです。
wheel
イベントと scroll
イベントを混同しないでください。
wheel
イベントは、必ずしもscroll
イベントを送信するわけではありません。例えば、要素がまったくスクロールできない場合もあります。ホイールやトラックパッドを使用したズーム操作も、wheel
イベントを送信します。scroll
イベントは、必ずしもwheel
イベントによって引き起こされるわけではありません。 要素は、キーボードや、スクロールバーのドラッグ、 JavaScript を使用することでもスクロールすることができます。wheel
イベントのdelta*
値は必ずしもコンテンツのスクロール方向を反映しているとは限りません。
したがって、スクロールの方向を取得するために、 wheel
イベントの delta*
プロパティに頼らないようにしてください。代わりに、 scroll
イベント内のターゲットの scrollLeft
や scrollTop
の値の変化を検出するようにしてください。
wheel
イベントはキャンセル可能です。イベントがキャンセルされた場合、スクロールやズームは実行されません。このため、実際にコンテンツのスクロールを実行する前に、ブラウザーがすべてのホイールイベントの処理を待機する必要が生じ、パフォーマンス上の問題が発生する可能性があります。これを回避するには、 passive: true
を設定して addEventListener()
を呼び出します。こうすると、ブラウザーがキャンセル不可能な wheel
イベントを生成する可能性があります。
構文
このイベント名を addEventListener()
等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
addEventListener("wheel", (event) => {});
onwheel = (event) => {};
イベント型
WheelEvent
です。 MouseEvent
、UIEvent
、Event
を継承しています。
イベントプロパティ
このインターフェイスには、祖先である MouseEvent
, UIEvent
, Event
から継承したプロパティがあります。
WheelEvent.deltaX
読取専用-
水平スクロール量を表す
double
を返します。 WheelEvent.deltaY
読取専用-
垂直方向のスクロール量を表す
double
を返します。 WheelEvent.deltaZ
読取専用-
z 軸のスクロール量を表す
double
を返します。 WheelEvent.deltaMode
読取専用-
delta*
値のスクロール量の単位を表すunsigned long
を返します。指定可能な値は次の通りです。定数 値 説明 WheelEvent.DOM_DELTA_PIXEL
0x00
delta*
の値はピクセル単位で指定します。WheelEvent.DOM_DELTA_LINE
0x01
delta*
値は行単位で指定します。行の高さを計算するために使用する方法はブラウザーに依存します。WheelEvent.DOM_DELTA_PAGE
0x02
delta*
値はページ単位で指定します。各マウスクリックはコンテンツのページをスクロールします。 WheelEvent.wheelDelta
読取専用 非推奨;-
ピクセル単位で距離を表す整数(32 ビット)を返します。
WheelEvent.wheelDeltaX
読取専用 非推奨;-
水平スクロール量を表す整数を返します。
WheelEvent.wheelDeltaY
読取専用 非推奨;-
垂直スクロール量を表す整数を返します。
例
ホイールで要素を拡大縮小
この例は、マウス(またはその他のポインティングデバイスの)ホイールを使用して要素を拡大縮小する方法を示します。
<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;
addEventListener による同等のもの
イベントハンドラーは addEventListener()
メソッドを使用して設定することもできます。
el.addEventListener("wheel", zoom, { passive: false });
仕様書
Specification |
---|
UI Events # event-type-wheel |
HTML # handler-onwheel |
ブラウザーの互換性
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
wheel event |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support