JQuery überprüfen, ob das Element im Sicht ist

Einige weitere JQuery -Snippets, um zu überprüfen, ob das Element in Ansicht ist .

<span>function isScrolledIntoView(elem)
</span><span>{
</span>    <span>var docViewTop = $(window).scrollTop();
</span>    <span>var docViewBottom = docViewTop + $(window).height();
</span>
    <span>var elemTop = $(elem).offset().top;
</span>    <span>var elemBottom = elemTop + $(elem).height();
</span>
    <span>return ((elemBottom < = docViewBottom) && (elemTop >= docViewTop));
</span><span>}
</span>
<span>isInView: function(elem)
</span><span>{
</span>    <span>var docViewTop = $(window).scrollTop(),
</span>        docViewBottom <span>= docViewTop + $(window).height(),
</span>        elemTop <span>= $(elem).offset().top,
</span>        elemBottom <span>= elemTop + $(elem).height();
</span>    <span>return ((elemBottom < = docViewBottom) && (elemTop >= docViewTop));
</span><span>}</span>

Die beste Methode, die ich bisher gefunden habe, ist das JQuery -Plugin. Funktioniert wie ein Zauber.

häufig gestellte Fragen (FAQs) zu JQuery Checkelement View

Wie kann ich JQuery verwenden, um zu überprüfen, ob sich ein Element im Ansichtsfenster befindet? Dieser Selektor gibt alle Elemente zurück, die derzeit im Ansichtsfenster sichtbar sind. Hier ist ein einfaches Beispiel:

if ($ ("Element"). IS (": In-Viewport") {
// Element ist im Ansichtsfenster
} else {
// Element ist nicht im Ansichtsport. : Sichtbar und: In-Viewport in jQuery? Dies bedeutet, dass selbst wenn sich ein Element derzeit nicht im Ansichtsfenster befindet (d. H. Es ist außerhalb des Bildschirms), es wird weiterhin ausgewählt von: sichtbar, wenn es nicht versteckt ist.

hingegen. Dies bedeutet, dass wenn ein Element aufgrund des Scrollens außerhalb des Bildschirms ist, nicht ausgewählt wird: In-Viewport, auch wenn es nicht versteckt ist. es mit den Abmessungen des Ansichtsfensters. Hier ist ein Beispiel:

var top_of_element = $ ("#Element"). Offset (). Top;

var boden_of_element = $ ("#element"). Offset (). Top $ ("#Element"). OUTERHELT (); $ (Fenster) .Scrolltop () $ (Fenster) .InnerHeight ();

if ((boden_of_screen> top_of_element) && (top_of_screen // Das Element ist sichtbar, tun etwas. sonst
}
Dieser Code überprüft, ob sich die obere und untere des Elements im Ansichtsfenster befindet, und führt eine Aktion aus, die auf dem Ergebnis basiert.

Kann ich JQuery verwenden, um zu überprüfen, ob sich ein Element im Ansichtsfenster befindet, ohne Plugins zu verwenden? Hier ist ein einfaches Beispiel:

Funktion iSElementInviewport (el) {
var rect = el.getBoundingClientRect (); RECT.Right ); Ansichtsfenster? Hier ist ein Beispiel:

var top_of_element = $ ("#Element"). Offset (). Top;
var boden_of_element = $ ("#element"). Offset (). Top $ ("#Element"). OUTERHELT (); $ (Fenster) .Scrolltop () $ (Fenster) .InnerHeight ();

if ((boden_of_screen> top_of_element) && (top_of_screen // Das Element ist teilweise sichtbar, do 🎜>} {{🎜> // Das Element ist etwas, das etwas tun kann. sonst
}
Dieser Code überprüft, ob sich die obere oder untere des Elements im Ansichtsfenster befindet, und führt eine Aktion aus, die auf dem Ergebnis basiert.

Das obige ist der detaillierte Inhalt vonJQuery überprüfen, ob das Element im Sicht ist. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!