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

Vérification de la visibilité des éléments dans la fenêtre à l'aide de jQuery

Dans ce scénario de dépannage, l'objectif est de vérifier si un élément div avec la classe "media " est présent dans la fenêtre visible du navigateur, quelle que soit la position de défilement. Le plugin jQuery-visible a été identifié comme une solution potentielle, mais sa mise en œuvre reste floue.

Pour résoudre ce problème, une fonction jQuery personnalisée peut être utilisée pour déterminer la visibilité de l'élément dans la fenêtre :

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

Cette fonction calcule la position de l'élément par rapport à la fenêtre en considérant ses limites supérieure et inférieure. En comparant ces limites avec celles de la fenêtre, il détermine si l'élément est partiellement ou entièrement visible.

Pour implémenter cela, incluez la fonction après jQuery et utilisez-la comme suit :

$(window).on('resize scroll', function() {
  if ($('#Something').isInViewport()) {
    // Element is visible in viewport
  } else {
    // Element is not visible in viewport
  }
});

Lorsque la fenêtre est redimensionnée ou défilée, ce code vérifiera si un élément avec l'ID "Quelque chose" est visible. Si tel est le cas, l'action spécifiée sera effectuée, comme déclencher un effet ou mettre à jour son apparence.

Il est important de noter que cette fonction vérifie uniquement la position verticale de l'élément, en supposant que son alignement horizontal est approprié . Si la visibilité horizontale et verticale doit être prise en compte, une logique supplémentaire serait nécessaire pour prendre en compte la largeur de l'élément et les limites horizontales 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!