Heim >Web-Frontend >js-Tutorial >Wie kann ich prüfen, ob dynamisch geladene Elemente nach dem Scrollen sichtbar sind?

Wie kann ich prüfen, ob dynamisch geladene Elemente nach dem Scrollen sichtbar sind?

Linda Hamilton
Linda HamiltonOriginal
2024-12-20 09:36:091061Durchsuche

How Can I Check if Dynamically Loaded Elements Are Visible After Scrolling?

Auflösen der Sichtbarkeit dynamisch geladener Elemente nach dem Scrollen

Problemstellung:

Beim dynamischen Laden von Elementen über AJAX ist dies möglich Es kann schwierig sein, festzustellen, ob sie im sichtbaren Bereich der Seite angezeigt werden, insbesondere wenn die Seite dies erfordert Scrollen.

Lösung:

Um die Sichtbarkeit eines Elements nach dem Scrollen zu bestimmen, können wir eine JavaScript-Funktion namens isScrolledIntoView() nutzen:

function isScrolledIntoView(elem) {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

Alternativer Ansatz:

Eine alternative Nutzenfunktion, Utils.isElementInView() bietet sowohl eine FullyInView- als auch eine PartialInView-Option:

function Utils() {}

Utils.prototype = {
    constructor: Utils,
    isElementInView: function(element, fullyInView) {
        var pageTop = $(window).scrollTop();
        var pageBottom = pageTop + $(window).height();
        var elementTop = $(element).offset().top;
        var elementBottom = elementTop + $(element).height();

        if (fullyInView === true) {
            return ((pageTop < elementTop) && (pageBottom > elementBottom));
        } else {
            return ((elementTop <= pageBottom) && (elementBottom >= pageTop));
        }
    }
};

var Utils = new Utils();

Verwendung:

var isElementInView = Utils.isElementInView($('#flyout-left-container'), false);

if (isElementInView) {
    console.log('in view');
} else {
    console.log('out of view');
}

Das obige ist der detaillierte Inhalt vonWie kann ich prüfen, ob dynamisch geladene Elemente nach dem Scrollen sichtbar sind?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn