Element: mousewheel イベント

非推奨: この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

非標準: この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

古い標準外の mousewheel イベントは、このイベントは Element で非同期に発生し、マウスホイールまたは類似の機器を操作している間の更新を提供します。mousewheel イベントはどの標準にも含まれておらず、いくつかのブラウザーで実装されていましたが、Firefox で実装されることはありませんでした。

メモ: この古いイベントの代わりに、標準の wheel イベントを使用してください。

構文

このイベント名を addEventListener() 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

js
addEventListener("mousewheel", (event) => {});

onmousewheel = (event) => {};

イベント型

WheelEvent です。Event を継承しています。

Event UIEvent MouseEvent WheelEvent

イベントプロパティ

このインターフェイスには、祖先である 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 読取専用

垂直スクロール量を表す整数を返します。

detail プロパティ

detail プロパティの値は常にゼロです。ただし、Opera では detail は Firefox 専用の DOMMouseScroll イベントの detail 値はスクロール距離を行単位で示し、負の値はスクロール移動が下方向または右方向であることを示し、正の値は上方向または左方向であることを示します。

メモ: macOS では、スクロール距離（したがって detail の値）は加速スクロール距離に基づいて計算されます。

Linux では、2 または -2 がネイティブのホイールイベントごとに設定されます。

wheelDelta, wheelDeltaX, wheelDeltaY の値

wheelDelta 属性の値は、ホイールがどれだけ回転したかを示す抽象的な値です。ホイールがユーザーから離れる方向に回転した場合は正の値、そうでない場合は負の値となります。これはデルタ値の符号が DOM Level 3 Event の wheel と異なることを意味しています。しかし、これらの値の量の意味はブラウザー間で同じではありません。詳しくは以下の説明を参照してください。

IE と Opera (Presto) は wheelDelta 属性にのみ対応しており、水平スクロールには対応していません。

wheelDeltaX 属性値は、横軸に沿った wheelDelta 属性値を示します。ユーザーが右にスクロールする機器を運営する場合、値は負になります。そうでない場合、つまり左にスクロールする場合、値は正の値になります。

wheelDeltaY 属性値は縦軸の wheelDelta 属性値を示します。値の符号は wheelDelta 属性値と同じです。

Chrome

Windows では WM_MOUSEWHEEL または WM_MOUSEHWHEEL の差分値と同じになります。また、システム設定のスクロール量がページスクロールであっても値は変わりません。

Linux の場合、値はネイティブホイールイベントごとに 120 または -120 です。これは Windows の IE や Chrome と同じ動作になります。

Macの場合、値は複雑です。ネイティブホイールイベントを発生させる機器が連続スクロールに対応している場合、値が変更されます。

連続スクロールに対応している機器（MacBook のトラックパッドや滑らかに回転するマウスホイールなど）の場合は、加速スクロール量から値が計算されます。この場合、値は Safari と同じです。

機器が連続スクロールに対応していない場合（典型的な例として、スムーズに回転させることができない古いマウスホイール）、値は非加速スクロール量（1 ノッチあたり 120）から計算されます。この場合、値は Safari とは異なります。

この違いはウェブアプリケーションの開発者にとって深刻な課題となります。つまり、ウェブ開発者は mousewheel イベントがどの機器によって発生させられたのかを知ることができません。

Safari

値は常に加速スクロール量から計算されます。これは、連続スクロールに対応している Chrome 以外のブラウザーとは実に異なります。

Opera (Presto)

値は常に detail 属性の値 ✕ 40 です。

Windows では、detail 属性の値は実際のスクロール量から計算されるため、システム設定やページで 1 ノッチあたりのスクロール量が 3 行になる以外は、他のブラウザーとは値が異なります。

Linuxでは、値はネイティブホイールイベントごとに 80 または -80 です。これは他のブラウザーとは異なります。

Mac では、detail 属性の値はネイティブイベントの加速スクロール量から計算されます。この値は通常、Safari や Chrome の値よりもはるかに大きくなります。

仕様書

どの仕様書にも含まれていません。

ブラウザーの互換性

BCD tables only load in the browser

関連情報

  • 代わりに待ち受けすべき標準の wheel イベント。