## Comment vérifier si un élément est visible dans la fenêtre à l'aide de jQuery ?

Détection de la visibilité des éléments dans la fenêtre à l'aide de jQuery

Question :

Comment puis-je déterminer si un élément spécifique, tel qu'un élément avec la classe « média », se trouve dans la fenêtre d'affichage actuelle du navigateur ?

Réponse :

Pour vérifier si un élément est visible dans la fenêtre d'affichage, quel que soit le la position de défilement, vous pouvez utiliser une fonction jQuery comme la suivante :

<code class="js">$.fn.isInViewport = function() {
    var elementTop = $(this).offset().top;
    var elementBottom = elementTop + $(this).outerHeight();

    var viewportTop = $(window).scrollTop();
    var viewportBottom = viewportTop + $(window).height();

    return elementBottom > viewportTop && elementTop < viewportBottom;
};</code>

Cette fonction compare les positions supérieure et inférieure de l'élément à celles de la fenêtre. Si la position inférieure de l'élément est en dessous du haut de la fenêtre et que sa position supérieure est au-dessus du bas de la fenêtre, il est considéré comme visible.

Pour surveiller les changements de visibilité dus au défilement ou au redimensionnement, vous pouvez utiliser le gestionnaire d'événements suivant :

<code class="js">$(window).on('resize scroll', function() {
    if ($('#Something').isInViewport()) {
        // Perform actions for visible elements
    } else {
        // Perform actions for non-visible elements
    }
});</code>

Veuillez noter que cette fonction examine uniquement l'état de la fenêtre d'affichage verticale de l'élément ; il ne vérifie pas s'il s'étend horizontalement au-delà de la fenêtre.

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!