onscroll
は GlobalEventHandlers
ミックスインのプロパティで、 wheel
イベントを処理するイベントハンドラー
です。
wheel
イベントは、ユーザーがマウス (または他のポインティングデバイス) のホイールを回転させたときに発生します。
メモ: onwheel
を onscroll
と混同しないようにしてください。 onwheel
は一般的なホイールの回転を扱うのに対し、 onscroll
はオブジェクトの内容のスクロールを扱います。
構文
target.onwheel = functionRef;
値
functionRef
は関数名または関数式です。この関数は引数として一つだけ、 WheelEvent
オブジェクトを受け取ります。
例
この例では、マウス (または他のポインティングデバイス) のホイールを使用して、要素を拡大縮小する方法を示します。
HTML
<div>マウスホイールで拡大縮小します。</div>
CSS
body {
min-height: 100vh;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
div {
width: 80px;
height: 80px;
background: #cdf;
padding: 5px;
transition: transform .3s;
}
JavaScript
function zoom(event) {
event.preventDefault();
if (event.deltaY < 0) {
// Zoom in
scale *= event.deltaY * -2;
}
else {
// Zoom out
scale /= event.deltaY * 2;
}
// 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');
document.onwheel = zoom;
結果
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
HTML Living Standard onwheel の定義 |
現行の標準 |
ブラウザーの互換性
BCD tables only load in the browser
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。