前回は一つのボタンでパラパラマンガの再生と停止をできるように実装しました。
〇【JavaScript】1つのボタンでパラパラ漫画の再生/停止をやってみた。
今回はJavaScriptのイベントである「touchmove」や「wheel」イベントを使用する場合の必須の知識をご紹介します。
例えば、以下のプログラムは画像上でマウスのホイールを回すと「コロコロしたよ」と表示されます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>sample1</title>
</head>
<body>
<img id="imagePlace" src="https://lifeinfo-navi.com/wp-content/uploads/2022/02/1.png"/>
<script type="text/javascript">
// img要素を取得する
let img = document.getElementById("imagePlace");
function test(){
console.log("コロコロ")
};
document.getElementById("imagePlace").addEventListener("wheel",test);
</script>
</body>
</html>let img = document.getElementById("imagePlace");
function test(){
console.log("コロコロしたよ")
};
document.getElementById("imagePlace").addEventListener("wheel",test);実行結果
結果を確認するにはブラウザのデベロッパーツール（windowsは「F12」）を開いて、「Console」をクリックします。
画像上でマウスのホイールを回すことで、「Console」内に「コロコロしたよ」と表示されるはずです。
しかし、マウスのホイールを回すことで、ページ全体も動きます。
原因はブラウザのデフォルト処理にあります。
ブラウザには基本的にホイールを回すとページがスクロールされるように設定されています。
この基本設定を画像上でホイールを回すときのみ無効化する必要があります。
パッシブリスナ(Passive Listener)とは、Chrome 51 より導入されたスクロールのパフォーマンスを改善するための仕組みです。addEventListenerのオプションに{ passive: true }を渡すことによって、パッシブリスナが有効になります。
このオプションをaddEventListenerでアクションを登録するときに渡すことで、アクション内でのEvent.preventDefault()の実行を無効化します。(＊preventDefault()はブラウザのデフォルト処理を行わないようにします。）
完成コード
function wheelpa(event){
event.preventDefault();
console.log("コロコロを改良したよ");
};
document.getElementById("imagePlace").addEventListener("wheel",wheelpa,{passive:false});実行結果
画像上でホイールを回しても、ページ全体がスクロールされないように実装することができました。