So ermitteln Sie, ob sich ein Element innerhalb des Anzeigebereichs in jquery befindet

Bei der Entwicklung von Webseiten müssen wir häufig DOM-Elemente manipulieren. Um ein Element zu bearbeiten, müssen Sie zunächst feststellen, ob sich das Element im Anzeigebereich befindet. Auf einer Webseite können viele Elemente ausgeblendet sein und sich nicht im Anzeigebereich befinden. Bevor Sie diese Elemente bedienen, müssen Sie daher feststellen, ob sie sich im Anzeigebereich befinden, um die Bedienung unnötiger Elemente zu vermeiden und die Seitenleistung zu verbessern.

jQuery bietet einige Methoden, um festzustellen, ob sich ein Element im Anzeigebereich befindet. Im Folgenden stellen wir diese Methoden im Detail vor, einschließlich Beurteilungsmethoden basierend auf Ansichtsfenstern, Dokumenten und Elementen.

Ansichtsfensterbasierte Beurteilungsmethode

Auf einer Webseite können wir das Ansichtsfenster (Ansichtsfenster) verwenden, um zu beurteilen, ob sich ein Element im Anzeigebereich befindet. Das Ansichtsfenster ist der Bereich der Seite, der aktuell für den Benutzer sichtbar ist und über die Eigenschaften des Fensterobjekts abgerufen werden kann.

jQuery bietet einige Methoden, um zu bestimmen, ob sich ein Element im Ansichtsfenster befindet, darunter:

1. $(window).height(): Ermittelt die Höhe des aktuellen Ansichtsfensters.
2. $(window).scrollTop(): Ruft den Abstand zwischen dem oberen Rand des aktuellen Ansichtsfensters und dem oberen Rand des Dokuments ab (d. h. den Abstand, um den die Bildlaufleiste scrollt).

Durch die beiden oben genannten Methoden können wir die obere und untere Position des aktuellen Ansichtsfensters ermitteln. Wenn bei einem Element seine obere Position kleiner als die aktuelle untere Position des Ansichtsfensters und seine untere Position größer als die aktuelle obere Position des Ansichtsfensters ist, liegt es im Anzeigebereich.

Basierend auf den oben genannten Prinzipien können wir Code verwenden, um die Funktion zum Bestimmen, ob sich ein Element im Ansichtsfenster befindet, zu implementieren:

function isInViewport(elem) {
    var elemTop = elem.offset().top;
    var elemBottom = elemTop + elem.height();
    var viewportTop = $(window).scrollTop();
    var viewportBottom = viewportTop + $(window).height();
    return elemTop < viewportBottom && elemBottom > viewportTop;
}

// 使用方式
var element = $('#my-element');
if (isInViewport(element)) {
    // 元素在视口内
} else {
    // 元素不在视口内
}

Im obigen Code empfängt die Funktion isInViewport() ein jQuery-Elementobjekt und ermittelt die Position des Elements Die Seite und die aktuelle Ansichtsfensterposition bestimmen, ob sich das Element innerhalb des Anzeigebereichs befindet, und geben einen booleschen Wert zurück.

Dokumentbasierte Beurteilungsmethode

Wenn der Seiteninhalt die Größe des Ansichtsfensters überschreitet, spiegelt die Größe des Ansichtsfensters den Seiteninhalt nicht mehr genau wider. Zu diesem Zeitpunkt muss beurteilt werden, ob sich das Element innerhalb des Anzeigebereichs befindet das Dokument. Bei der dokumentbasierten Beurteilungsmethode müssen der Abstand des Elements relativ zum oberen Rand des Dokuments und die Höhe des Dokuments ermittelt werden, um festzustellen, ob sich ein Element im sichtbaren Bereich des Dokuments befindet.

jQuery bietet die folgenden Methoden, um die Position des Elements im Dokument und die Höhe des Dokuments zu ermitteln:

1. $(document).height(): Ermittelt die Höhe des Dokuments.
2. elem.offset().top: Ermittelt den Abstand des Elements relativ zum oberen Rand des Dokuments.

Mit den beiden oben genannten Methoden können wir die obere Position des Elements und die Höhe des Dokuments ermitteln, um festzustellen, ob sich das Element im sichtbaren Bereich des Dokuments befindet. Die folgende Funktion bestimmt, ob sich ein Element im sichtbaren Bereich des Dokuments befindet:

function isElementInDocumentViewport(elem) {
    var elemTop = elem.offset().top;
    var elemBottom = elemTop + elem.height();
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();
    var docHeight = $(document).height();
    return elemTop < docViewBottom && elemBottom > docViewTop && elemTop > 0 && elemBottom < docHeight;
}

// 使用方式
var element = $(&#39;#my-element&#39;);
if (isElementInDocumentViewport(element)) {
    // 元素在可视区域内
} else {
    // 元素不在可视区域内
}

Im obigen Code bestimmt die Funktion isElementInDocumentViewport(), ob sich ein Element im sichtbaren Bereich des Dokuments befindet, und Die Funktion gibt einen booleschen Wert zurück. elemTop und elemBottom stellen jeweils den Abstand zwischen der Ober- und Unterseite des Elements relativ zur Oberkante des Dokuments dar, docViewTop und docViewBottom repräsentieren jeweils den Abstand zwischen der Ober- und Unterseite des Dokuments relativ zur Oberkante des Ansichtsfensters und docHeight stellt die dar Höhe des Dokuments.

Elementbasierte Beurteilungsmethode

Bei der Beurteilung, ob sich ein Element im Anzeigebereich befindet, kümmern wir uns manchmal nur um die Situation innerhalb eines bestimmten übergeordneten Elements. Zu diesem Zeitpunkt können wir die elementbasierte Beurteilungsmethode verwenden, um die Höhe des übergeordneten Elements und die Position der Bildlaufleiste zu ermitteln und festzustellen, ob sich das Element im sichtbaren Bereich des übergeordneten Elements befindet.

Die folgende Funktion bestimmt, ob sich ein Element im sichtbaren Bereich des übergeordneten Elements befindet:

function isElementInElementViewport(elem, parentElem) {
    var elemTop = elem.offset().top - parentElem.offset().top;
    var elemBottom = elemTop + elem.height();
    var parentViewTop = parentElem.scrollTop();
    var parentViewBottom = parentViewTop + parentElem.height();
    var parentHeight = parentElem.height();
    return elemTop < parentViewBottom && elemBottom > parentViewTop && elemTop > 0 && elemBottom < parentHeight;
}

// 使用方式
var element = $('#my-element');
var parentElement = $('#my-parent-element');
if (isElementInElementViewport(element, parentElement)) {
    // 元素在父元素可视区域内
} else {
    // 元素不在父元素可视区域内
}

Im obigen Code empfängt die Funktion isElementInElementViewport() zwei jQuery-Elementobjekte, bei denen es sich um das Element handelt, das benötigt wird bestimmt werden und sein übergeordnetes Element. Die Funktion gibt einen booleschen Wert zurück. elemTop und elemBottom repräsentieren den Abstand zwischen der Ober- und Unterseite des Elements relativ zur Oberseite des übergeordneten Elements und parentViewBottom repräsentieren den Abstand zwischen der Ober- und Unterseite des übergeordneten Elements relativ zur Oberkante der Bildlaufleiste stellt die Höhe des übergeordneten Elements dar.

Fazit

In der Webentwicklung ist die Feststellung, ob sich ein Element innerhalb des Anzeigebereichs befindet, eine grundlegende und wichtige Funktion. Wenn wir jQuery zum Betreiben von DOM-Elementen verwenden, können wir die von jQuery bereitgestellten Methoden verwenden, um festzustellen, ob sich das Element im sichtbaren Bereich des Ansichtsfensters, Dokuments oder übergeordneten Elements befindet. Durch den rationalen Einsatz dieser Methoden können wir die Seitenleistung verbessern und unnötige Vorgänge vermeiden.

Das obige ist der detaillierte Inhalt vonSo ermitteln Sie, ob sich ein Element innerhalb des Anzeigebereichs in jquery befindet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!