htmlページで要素がユーザーに表示されているかどうかをテストします。

Question

要素がhtmlページに表示されているかどうかを確認する方法はありますか？このよう

：

一つは、おそらくそれは、垂直/水平スクロール位置、ブラウザウィンドウの幅/高さとページ上の要素の位置/サイズを考慮しないことができますが、私はjQueryの経験がほとんどないので、それをどうやって行うのか分かりません。そして、私が呼ぶことができる単純な機能があるかもしれない、私は知らない。

Answer 1

セレクタを使用して、要素が現在DOMに表示されているかどうかを確認できます。

編集：@BenMが述べたように、あなたのページの要素が実際にあなたのスクロール可能な範囲の外にある場合

しかし、これはチェックしません - あなたがそのような場合に使用することができます偉大な小さなプラグインは次のようになりますViewport Selectors for jQuery。

Answer 2

これは私がこれを行うために使用するコードです。それは素晴らしい仕事をするためにテストされています。

function isVisible($obj) { 
    var top = $(window).scrollTop(); 
    var bottom = top + $(window).height(); 
    var objTop = $obj.offset().top; 
    var objBottom = objTop + $obj.height(); 

    if(objTop < bottom && objBottom > top) { 
     //some part of $obj is visible on the screen. 
     //does not consider left/right, only vertical. 
    } 
} 

の