Wie kann ich überprüfen, ob ein Element nach dem Scrollen der Seite mit JavaScript sichtbar ist?

Elementsichtbarkeit nach dem Scrollen überprüfen

Beim dynamischen Laden von Elementen über AJAX kann es schwierig sein, ihre Sichtbarkeit sicherzustellen, insbesondere wenn sie erst danach sichtbar werden Scrollen der Seite. In diesem Artikel werden Methoden untersucht, um festzustellen, ob sich ein Element nach dem Scrollen im sichtbaren Teil der Seite befindet.

Lösung: JavaScript-Sichtbarkeitsprüfung

Um die Sichtbarkeit eines Elements zu überprüfen, JavaScript-Code eingesetzt werden kann. Hier ist eine Funktion, die dies erreicht:

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));
}

Diese Funktion nimmt ein Element als Eingabe und gibt einen Booleschen Wert zurück, der angibt, ob es sichtbar ist.

Erweiterte Hilfsfunktion

Für einen vielseitigeren Ansatz betrachten Sie die folgende Dienstprogrammfunktion:

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));
        }
    }
};

Diese Funktion akzeptiert zwei Parameter: an Element und ein optionales Flag, das angibt, ob das Element vollständig oder teilweise sichtbar sein soll.

Verwendung

Um die Funktion zu verwenden, erstellen Sie einfach eine Instanz der Utils-Klasse und rufen Sie sie auf die isElementInView-Methode mit dem gewünschten Element und optionalem Flag:

var Utils = new Utils();
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 überprüfen, ob ein Element nach dem Scrollen der Seite mit JavaScript sichtbar ist?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!