シェアありがとうございます!

プラグインを使わないで要素がウィンドウ内に表示されたかjQueryで判別する方法【javascript】

 最近のwebサイトでは特定の要素がウィンドウ内に表示されたときにアニメーションさせたり、何かしらのギミックを加える表現が主流の1つとなっています。

 そこで、今回はプラグインは使わずにjQueryのみで特定の要素が表示領域に存在するかどうか判別する方法をを紹介したいと思います。

環境

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

今回の環境

  • jQuery3.2.1

スクラッチで実装することで余計な機能を削減できる

 この表示領域に特定要素が表示されたときに処理を実行させるには、表示領域に特定要素が存在するか判別する必要がありますが、その判別をするプラグインはinview.jsをはじめたくさんあります。

 しかし、プラグインを使わずとも簡単に実装できるので容量の削減や余計な機能の削減、ページ速度を上げるという意味でもスクラッチで実装できるように覚えておくと便利です。

html

 では、まずサンプルとなるhtml。

 このサンプルhtmlでは上部にマージン2000pxを持った要素が存在します。そしてこの要素がウィンドウ内に表示されたかどうかをjQueryを使って判別したいと思います。

ページの読み込み完了を判別

 まずは、特定の要素が画像の場合もあるのでページの読み込みが完了してから処理の実行をしたいので、下記のコードでページの読み込み完了を取得します。

スクロールイベントを感知

 次にスクロールイベントも取得しないといけないので下記のコードで感知します。

特定の要素の位置を取得する

 続いて、ターゲットとなる要素の位置を下記のコードで取得します。今回はクラス名が「target」の要素がターゲットとなります。

表示領域のボトム座標を取得

 次は、特定の要素が表示領域に存在するかどうかを判別するために、表示領域の一番下ボトム座標を下記のコードで取得します。これはスクロールイベント内に記述する必要があります。

 こちらのコードを少し説明すると、scrollTopでスクロールしたときのページトップの座標位置(Y)が取得できるので、その数値に表示領域の高さを足してあげることで表示領域の座標が取得できます。

表示領域内に存在するか判別

 そして、最後にif分でターゲットとなる特定要素が表示領域内に存在するか判別します。

 scrollTop()がページトップ、inviewBottomがページボトムになるので、その間にtargetがあれば表示領域に存在するということになります。

完成コード

 最後にサンプルの完成コードを下記に載せておきます。

まとめ

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

 とても簡単に実装できるので無理にプラグインを使う必要はないですね。

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

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

お仕事の依頼はこちら

著者プロフィール

Takanori Hashi

東京、奄美大島、宮崎の3拠点生活を目指すフリーランスのWEBエンジニア兼デザイナー。大人になってもずっと遊んでいたい人。TwitterもInstagramも基本フォローバックするのでお気軽にフォローしてください!

人気記事

コメントを残す

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