javascript - HTMLページで要素がユーザーに表示されるかどうかをテストします

Question

要素が HTML ページに表示されているかどうかを知る方法はありますか?

このような：

水平/垂直スクロール位置、ブラウザ ウィンドウの幅/高さ、およびページ上の要素の位置/サイズを考慮すると、おそらくそれを行うことができますが、jQuery の経験がほとんどないため、方法がわかりません。 . そして、呼び出すことができる単純な関数があるかもしれませんが、わかりません。

Answer 1

セレクターを使用.is(':visible')して、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.
    }
}