## Wie prüfe ich mit jQuery, ob ein Element im Ansichtsfenster sichtbar ist?

Sichtbarkeit von Elementen im Ansichtsfenster mithilfe von jQuery erkennen

Frage:

Wie kann ich feststellen, ob ein bestimmtes Element, B. eines mit der Klasse „Medien“, befindet sich im aktuellen Browser-Ansichtsfenster?

Antwort:

Um festzustellen, ob ein Element unabhängig davon im Ansichtsfenster sichtbar ist Für die Bildlaufposition können Sie eine jQuery-Funktion wie die folgende verwenden:

<code class="js">$.fn.isInViewport = function() {
    var elementTop = $(this).offset().top;
    var elementBottom = elementTop + $(this).outerHeight();

    var viewportTop = $(window).scrollTop();
    var viewportBottom = viewportTop + $(window).height();

    return elementBottom > viewportTop && elementTop < viewportBottom;
};</code>

Diese Funktion vergleicht die obere und untere Position des Elements mit denen des Ansichtsfensters. Wenn die untere Position des Elements unterhalb der Oberseite des Ansichtsfensters und seine obere Position über der Unterseite des Ansichtsfensters liegt, gilt es als sichtbar.

Um Änderungen der Sichtbarkeit aufgrund von Scrollen oder Größenänderung zu überwachen, können Sie den folgenden Ereignishandler verwenden:

<code class="js">$(window).on('resize scroll', function() {
    if ($('#Something').isInViewport()) {
        // Perform actions for visible elements
    } else {
        // Perform actions for non-visible elements
    }
});</code>

Bitte beachten Sie, dass diese Funktion nur den vertikalen Ansichtsfensterstatus des Elements untersucht; Es wird nicht überprüft, ob es horizontal über das Ansichtsfenster hinausragt.

Das obige ist der detaillierte Inhalt von## Wie prüfe ich mit jQuery, ob ein Element im Ansichtsfenster sichtbar ist?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!