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を見ると、マウスを続けて回した数が表示されていますね
