JS

ネイティブネタ帳

UI

モーダル

タブ

ドロワー

スライダー

スクロール

アコーディオン

目次

ローディングアニメーション

ツールチップ

ヘッダー

フォーム

フォーム

文字

文字の装飾

文字の操作

文字のカウント

数字の操作

ウィンドウ

ウィンドウ操作

タイトルの操作

ページ遷移時の動き

class

classの操作

要素

要素の操作

要素の追加

API

WP REST API

Google Books APIs

楽天市場API

画像・動画

画像の操作

YouTube

リンク

Google Analytics

cookie

検索

検索

お気に入り登録

JavaScriptの.addEventListenerのスクロールでclassの追加と削除

お気に入り登録をすると、お気に入り記事一覧に登録することができます。

.addEventListener

JavaScriptの.addEventListenerのスクロールでclassの追加と削除

JavaScriptの.addEventListenerのスクロールでclassの追加と削除

マウスクリックや画面をスクロールした時に、.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 で、要素のclassを削除したり、追加したりすることが可能です。

// viewのclassを追加
document.getElementById('javascroll').classList.add('view');
// viewのclassを削除
document.getElementById('javascroll').classList.remove('view');

上記2つのコードを条件分岐で使っています。この .classList は、classの置換など色々できるので、覚えておくと便利です。

classのトグル JavaScriptの.classListを使ったclassの削除や追加