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

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!