【プラグインなし】ウィンドウ内に特定要素(複数対応)が表示されたかjQueryで判別する方法【javascript】

 前回、プラグインを使用しないで特定の要素がウィンドウ内(表示領域)に存在するか判別する方法を紹介しましたが、今回は前回の応用編として複数の要素に対応する方法を紹介したいと思います。

 前回の記事は下記の関連記事をご参照ください。

環境

 なお、今回は下記のjQueryのバージョンを使って実装したいと思います。

今回の環境

  • jQuery3.2.1

1つの要素の判別方法

 まずは、おさらいも含めて前回作成したコードを見てみましょう。







サンプル



	
	
TARGET

 上記のコードでプラグインを使わずにjQueryのみで特定の要素が表示領域に存在するか判別することができます。

 簡単に説明すると、ページの読み込みが完了したタイミングでターゲットとなる要素の位置を取得してスクロールイベントを感知することで表示領域内に要素が存在するか判別しています。

複数要素の判別方法

 では、要素が複数になった場合はどのようにするかと言うと至って簡単です。特に難しいことは何もなくeachメソッドを使用することで簡単に実現できます。

 実際に上のコードを改変して複数要素に対応したコードに改修してみたいと思います。







サンプル




	
TARGET1
TARGET2
TARGET3

 ベースは単一の場合と同じで、複数の要素に対応するためにスクロールイベント内31行目でeachメソッドを使って複数に対応しているだけですね。これで対応させたい要素に「target」というクラス名をつけてあげるだけで動作します。ただし、サイトの作りによっては動作しないこともあるので、その場合は適宜調整してみてください。

まとめ

 ということで、今回はプラグインは使わずにjQueryのみで特定要素がウィンドウ内(表示領域)に存在するか判別する方法の応用編として複数の要素に対応する方法を紹介させていただきました。

 それでは今回はここまで!また!

お仕事のご相談・ご依頼
お気軽にお問い合わせください!

お仕事の依頼はこちら

著者プロフィール

Taka

東京、奄美大島を拠点にサーフィンとスノーボードが好きなフリーランスのWebクリエイターです。普段はプログラム書いたりデザインしたり映像作ったりしています。いろいろな人の話しを聞くのが好きなので、このブログを通して多くの人と繋がりが出来たら嬉しいです。noteとInstagramもやっているのでフォローしてくれたらありがたいです!

人気記事

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です