【jQuery】要素が画面内に入ったかどうかを判定する方法

サンプル

jquery.inviewを使うと簡単。

GitHub – protonet/jquery.inview

https://github.com/protonet/jquery.inview

HTML
CSS
jQuery

自分で何とかする方法

jquery.inviewを使わなくても、要素や画面の最上部・最下部の座標を取得して判定することもできる。

jQuery

ただし、上記の場合だと

  • 判定はスクロールしたときのみ
    (画面を開いた時点で画面内に要素があっても、スクロールしない限りは”画面内にある”と判定されない)
  • 同じクラス名を持つ要素が複数あるときは、最初の1つしか判定できない
    (idで判定するなら1つしかないので問題はない)

等の問題があるので、実際に使いたければもう少し改良の余地あり。

そのあたりを考慮すると最初からjquery.inviewを使う方が早い。

コメントを残す

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