Testen, ob das Element vom Benutzer auf einer HTML-Seite gesehen werden kann

Question

Gibt es eine Möglichkeit zu wissen, ob ein Element auf einer HTML-Seite sichtbar ist?

So:

Man kann wohl noch bedenkt, dass es die horizontalen/vertikalen Bildlauf-Positionen, die Breite/Höhe des Browserfensters und die Position/Größe des Elements auf der Seite, aber Ich habe wenig Erfahrung in jQuery, also weiß ich nicht, wie es geht. Und es könnte eine einfache Funktion geben, die man anrufen kann, ich weiß es nicht.

Answer 1

Sie können die .is(':visible') Selektoren verwenden, um zu überprüfen, ob ein Element derzeit im DOM sichtbar ist.

Edit:

jedoch als @BenM erwähnt, diese prüft nicht, ob die Elemente auf Ihrer Seite tatsächlich aus Ihrem scrollbaren Bereich sind - ein großes kleines Plugin, das Sie in diesem Fall benutzen könnten, wäre Viewport Selectors for jQuery.

Answer 2

Hier ist ein Code, den ich verwende, um dies zu tun. Es wurde getestet, um großartig zu funktionieren.

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. 
    } 
}