Comment vérifier si un élément est visible dans la fenêtre du navigateur avec JQuery ?

JQuery Vérifier si un élément est visible dans la fenêtre d'affichage : une explication complète

Déterminer si un élément est visible dans la fenêtre d'affichage du navigateur est une tâche courante dans le développement front-end. JQuery fournit un moyen pratique d'y parvenir à l'aide de plugins ou de fonctions personnalisées.

Utilisation d'un plugin

Le plugin visible JQuery offre un moyen simple de vérifier la visibilité d'un élément. Cependant, vous pourriez rencontrer des difficultés pour le mettre en œuvre avec la fonction fournie. Voici un exemple qui fonctionnera avec le plugin visible :

$('#element').visible(function() {
  // This function will be executed when the element is visible
});

Développement d'une fonction personnalisée

Si vous préférez ne pas utiliser de plugin, vous pouvez créer une fonction personnalisée fonction pour vérifier la visibilité :

$.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;
};

Exemple d'utilisation

Une fois que vous avez défini la fonction isInViewport, vous pouvez l'utiliser comme suit :

$(window).on('resize scroll', function() {
  if ($('#element').isInViewport()) {
    // The element is visible
  } else {
    // The element is not visible
  }
});

Limitations

Notez que cette fonction vérifie uniquement la visibilité verticale. Si vous devez également déterminer la visibilité horizontale, vous pouvez étendre la fonction en conséquence.

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!