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

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

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

環境

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

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

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

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

html

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

	
TARGET

	

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

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

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

//ページ読み込み完了
$(window).on('load',function(){
    //読み込みが完了した際に実行したい処理
})

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

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

$(window).scroll(function(){
    //スクロールイベントを感知
});

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

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

//ターゲットとなる要素の位置を取得
var target = $('.target').offset().top;

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

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

//表示領域のボトム座標を取得
var inviewBottom = $(window).scrollTop() + $(window).height();

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

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

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

if( target > $(window).scrollTop() && target < inviewBottom){
    //ターゲット要素が表示領域内に存在
    console.log('exist');
}else{
    //ターゲット要素が表示領域内に存在しない
    console.log('not exist');
}

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

完成コード

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

	
	
TARGET

	
	

まとめ

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

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

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