Comment déclencher un événement lorsqu'un utilisateur fait défiler vers un élément spécifique avec jQuery ?

Déclencher un événement lorsque l'utilisateur fait défiler vers un élément spécifique avec jQuery

Dans le développement Web, il est souvent nécessaire de déclencher un événement lorsqu'un utilisateur fait défiler jusqu'à un élément particulier de la page. Cela peut être utile pour révéler ou mettre à jour du contenu, déclencher des animations ou afficher des notifications.

Pour y parvenir avec jQuery, vous pouvez utiliser l'événement scroll sur l'objet window. Cependant, la simple utilisation de $('#scroll-to').scroll() n'est pas suffisante, car l'événement scroll n'est déclenché que pour les éléments actuellement visibles sur la page.

Au lieu de cela, vous pouvez exploiter l'option de jQuery fonction offset() pour déterminer la position de l'élément par rapport à la fenêtre, ainsi que la fonction externalHeight() pour obtenir sa hauteur. En comparant ces valeurs à la hauteur de la fenêtre et à la valeur scrollTop, vous pouvez déterminer si l'élément est actuellement visible par l'utilisateur.

Par exemple, le code suivant calcule le décalage et la hauteur de l'élément #scroll-to h1 puis le compare à la position de défilement de la fenêtre :

$(window).scroll(function() {
  var hT = $('#scroll-to').offset().top,
      hH = $('#scroll-to').outerHeight(),
      wH = $(window).height(),
      wS = $(this).scrollTop();
  if (wS > (hT + hH - wH)) {
    console.log('H1 is in the viewport!');
  }
});

Cette approche vous permet de déclencher un événement chaque fois que l'élément h1 défile dans la vue de l'utilisateur, quelle que soit sa position sur la page. Vous pouvez adapter ce code pour effectuer n'importe quelle action souhaitée lorsque l'élément spécifié devient visible.

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!