wheelEventでは、何らかのオブジェクトをマウスや指でスクロールした時にその回数を取得することができます。この取得した回数を使ってオブジェクトに動きをつけたりページ自体を更新することもできます。今回は自分も扱うのは初めてで勝手もよくわかっていないので、サンプルコードを少しいじったもので説明していきたいと思います。まずコードを載せていきます。
</pre> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- import the webpage's stylesheet --> <link rel="stylesheet" href="/style.css"> <!-- import the webpage's javascript file --> <script src="/script.js" defer></script> </head> <body> <div id="hoge"></div> <hr> <div id="result"></div> </body> </html> <pre>
</pre> div#hoge { min-height: 500px ; background: url('https://cdn.glitch.com/8c8b4042-9013-4646-bf2c-5e42bdd75335%2Fgithub.jpg?1551425494610'); background-repeat:no-repeat; } div#result { white-space: pre-wrap ; } <pre>
</pre> //** try it! **/ var element = document.getElementById( "hoge" ) ; var resultElement = document.getElementById( "result" ) ; var element.addEventListener( "wheel", callbackFn ) ; var callbackFn = function ( event ) { event.preventDefault() ; console.log( "deltaY", event.deltaY ) ; resultElement.innerHTML = "" ; resultElement.appendChild( new Text( "currentTarget: " + event.currentTarget + "(#" + event.currentTarget.id + ")" + "\n" ) ) ; resultElement.appendChild( new Text( "deltaX: " + event.deltaX + "\n" ) ) ; resultElement.appendChild( new Text( "deltaY: " + event.deltaY + "\n" ) ) ; } ; element.addEventListener( "wheel", callbackFn ) ; <pre>
スクリプト部分では、element.addEventListenerで第一引数にwheelを第二引数にコールバックとして callbackFnメソッドを設置しました。wheelを宣言したので、これでオブジェクトに対してのスクロール数を取ってくることができます。コールバック関数では、スクロールした回数を表示する(appendChildで積み重ねてカウントしている)メソッドを作りました。スクロールを下に回すと、125。上に回すと-125と表示されます。この回数を応用して使えるようになれば、iframeなどのライブラリと合わせてインフォメーション画面を作れたりと柔軟なコーディングが期待できそうですね。
console.logを見ると、マウスを続けて回した数が表示されていますね