浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【javaScript】wheelイベントでcssにアクションを付けてみる

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

 

  • この記事いいね! (0)