Comment puis-je vérifier si un élément est visible après le défilement de la page avec JavaScript ?

Vérification de la visibilité des éléments après le défilement

Lors du chargement dynamique d'éléments via AJAX, garantir leur visibilité peut être difficile, surtout s'ils ne deviennent visibles qu'après faire défiler la page. Cet article explore les méthodes permettant de déterminer si un élément se trouve dans la partie visible de la page après le défilement.

Solution : vérification de la visibilité JavaScript

Pour vérifier la visibilité de l'élément, le code JavaScript peuvent être employés. Voici une fonction qui accomplit cela :

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

Cette fonction prend un élément en entrée et renvoie un booléen indiquant s'il est visible.

Fonction utilitaire améliorée

Pour une approche plus polyvalente, considérez la fonction utilitaire suivante :

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

Cette fonction accepte deux paramètres : un élément et un indicateur facultatif indiquant si l'élément doit être entièrement ou partiellement visible.

Utilisation

Pour utiliser la fonction, créez simplement une instance de la classe Utils et appelez la méthode isElementInView avec l'élément souhaité et l'indicateur facultatif :

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

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

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!