Element: wheel イベント
wheel
イベントは、ユーザーがポインティングデバイス (通常はマウス) のホイールボタンを回転させたときに発行されます。
このイベントは標準外、非推奨の mousewheel
(en-US) イベントを置き換えるものです。
バブリング | あり |
---|---|
キャンセル | 可 |
インターフェイス | WheelEvent |
イベントハンドラープロパティ | onwheel |
メモ: wheel
イベントと scroll
イベントを混同しないでください。 wheel
イベントの既定のアクションは実装固有のものであり、必ずしも scroll
イベントを発行するわけではありません。その場合でも、ホイールイベントの delta*
値は必ずしもコンテンツのスクロール方向を反映しているとは限りません。したがって、スクロールの方向を取得するために、 wheel
イベントの delta*
プロパティに頼らないようにしてください。代わりに、 scroll
イベント内のターゲットの scrollLeft
や scrollTop
の値の変化を検出するようにしてください。
例
ホイールで要素を拡大縮小
この例は、マウス (またはその他のポインティングデバイスの) ホイールを使用して要素を拡大縮小する方法を示します。
<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(.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);
仕様書
Specification |
---|
UI Events # event-type-wheel |
HTML Standard # handler-onwheel |
ブラウザーの互換性
BCD tables only load in the browser