


## Wie prüfe ich mit jQuery, ob ein Element im Ansichtsfenster sichtbar ist?
Oct 25, 2024 am 06:29 AMSichtbarkeit 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!

Heißer Artikel

Hot-Tools-Tags

Heißer Artikel

Heiße Artikel -Tags

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Ersetzen Sie Stringzeichen in JavaScript

JQuery überprüfen, ob das Datum gültig ist

HTTP-Debugging mit Knoten und HTTP-Konsole

Benutzerdefinierte Google -Search -API -Setup -Tutorial

JQuery fügen Sie Scrollbar zu Div hinzu
