Comment puis-je détecter si un élément chargé dynamiquement est visible après le défilement ?

Détection de la visibilité des éléments après le défilement

Pour les éléments chargés dynamiquement à l'aide d'AJAX, déterminer leur visibilité dans la fenêtre d'affichage peut être crucial. Ceci est particulièrement pertinent pour les éléments qui apparaissent après le défilement. Voici une méthode efficace pour résoudre ce problème :

Utilisation d'une fonction personnalisée :

La fonction suivante vérifie si un élément est visible dans la fenêtre actuelle :

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

Utilisation d'une fonction utilitaire :

Une option plus polyvalente consiste à utiliser un fonction utilitaire qui propose une personnalisation :

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

Utilisation :

Pour déterminer si un élément est visible, appelez simplement cette fonction :

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

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

En mettant en œuvre ces méthodes, vous pouvez facilement détecter la visibilité des éléments chargés dynamiquement, permettant des interactions de page et des expériences utilisateur optimisées.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!