マウスクリックや画面をスクロールした時に、.addEventListener で状態を取得してDOM操作をします。
目次
.addEventListener
.addEventListenerは、「マウスクリック」や「他のページに移動する場合」など、その状態を取得してJavaScriptからさまざまなイベント処理を実行することができるメソッドです。
いろんなイベント設定が可能なメソッドですが、この記事では「スクロール」イベントでのclassの追加と削除です。
.addEventListenerスクロールを使ったサンプル
.addEventListener のスクロールイベントで、classの追加と削除を行うサンプルです。以下の動画の右上にご注目ください。
スクロールで
表示される要素
ページを開いて、少し下へスクロールすると右上に要素が表示される仕組みです。ちなみに、この記事をPCでみた場合同じように表示させるので、試してみてください。
スクロールすると表示される「TOPに戻るボタン」に使えるメソッドです。
.addEventListenerスクロールを使ったコード
このサンプルのHTMLを見てみましょう。
<div class="javaSample" id="javascroll">
<p>スクロールで<br>表示される要素</p>
</div>このように、HTMLでは div タグの中に p タグのみのシンプルな構成です。
そして、以下が対象のJavaScriptです。
window.addEventListener('scroll', function(){
if( 300 < window.scrollY ) {
document.getElementById('javascroll').classList.add('view');
} else {
document.getElementById('javascroll').classList.remove('view');
}
});if( 300 < window.scrollY ) で条件分岐をする内容です。
これは、ページを開いて300px程Y方向へスクロールした時に、javascrollのidを持つ div タグをチェックして view のclassを付与します。
そして、逆にスクロールしていない場合は classList.remove でclassを削除します。
.classList.addと.classList.removeでclassの追加と削除
.classList
// viewのclassを追加
document.getElementById('javascroll').classList.add('view');
// viewのclassを削除
document.getElementById('javascroll').classList.remove('view');
上記2つのコードを条件分岐で使っています。この .classList
JavaScriptの.classListを使ったclassの削除や追加
