onwheelイベント

DOM イベント WheelEvent

定義と使用法

マウスのホイールが要素上で上下にスクロールすると、onwheelイベントが発生します。

タッチパッドで要素をスクロールしたり、拡大したり、縮小したりした場合にもonwheelイベントが発生します。

例

ユーザーが<div>要素上でマウスのホイールをスクロールすると、そのフォントサイズが変更されます：

document.getElementById("myDIV").addEventListener("wheel", myFunction);
function myFunction() {
  this.style.fontSize = "35px";
}

自分で試してみてください

文法

HTMLでは：

<要素 onwheel="myScript">

自分で試してみてください

JavaScriptでは：

オブジェクト.onwheel = function(){myScript};

自分で試してみてください

JavaScriptでは、addEventListener()メソッドを使用して：

オブジェクト.addEventListener("wheel", myScript);

自分で試してみてください

注記：Internet Explorer 8以前のバージョンはサポートしていません addEventListener()メソッド。

技術的詳細

バブル： サポート
キャンセル可能： サポート
イベントタイプ： WheelEvent
サポートするHTMLタグ： すべてのHTML要素
DOMバージョン： レベル3イベント

ブラウザのサポート

テーブルの数字は、そのイベントを完全にサポートする最初のブラウザのバージョンを示しています。

イベント Chrome IE Firefox Safari Opera
onwheel 31.0 9.0 17.0 サポート外 18.0

注記：IE では、wheel イベントをサポートするには addEventListener() メソッドを使用する必要があります。DOM オブジェクトには onwheel プロパティがありません。

DOM イベント WheelEvent