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

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

Lors du chargement dynamique d'éléments via AJAX, il peut être crucial de s'assurer qu'ils sont visibles par les utilisateurs. Dans les cas où les éléments ne deviennent visibles qu'après avoir fait défiler la page, les développeurs peuvent se demander comment déterminer l'état de visibilité actuel d'un élément.

Une solution efficace à ce problème consiste à utiliser des fonctions JavaScript qui vérifient si un élément est dans la fenêtre. Ces fonctions prennent en compte à la fois la position de l'élément sur la page et la position de défilement actuelle de l'utilisateur.

Implémentation JavaScript

Le code JavaScript suivant fournit une solution complète pour vérifier la visibilité des éléments :

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

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

    return ((elemBottom = docViewTop));
}

Alternativement, pour une fonction utilitaire plus polyvalente, considérez ceci approche :

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  elementBottom));
        } else {
            return ((elementTop = pageTop));
        }
    }
};

var Utils = new Utils();

Utilisation

Pour utiliser ces fonctions, fournissez simplement l'élément que vous souhaitez vérifier en argument. Pour les contrôles de visibilité partielle, utilisez false comme deuxième argument, tandis que pour les contrôles de visibilité complète, utilisez true.

Par exemple :

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

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

En employant ces techniques, les développeurs peuvent surveiller efficacement la visibilité des éléments. , garantissant une expérience utilisateur optimale et l'affichage de contenus pertinents.

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!