Comment puis-je détecter lorsqu'un utilisateur atteint le bas d'un élément en JavaScript ?

Comment déterminer la position de défilement de l'utilisateur sur n'importe quel élément

Lors de la mise en œuvre de systèmes de pagination, détecter lorsqu'un utilisateur a atteint le bas d'une page Web ou tout élément spécifique est crucial. Cela permet de charger en temps opportun du nouveau contenu, améliorant ainsi l'expérience utilisateur.

Solution utilisant JavaScript

Une approche courante consiste à utiliser l'écouteur d'événements window.scroll() en JavaScript , qui se déclenche chaque fois que l'utilisateur fait défiler la page. Voici un exemple jQuery qui détecte lorsque l'ensemble du document a défilé vers le bas :

$(window).scroll(function() {
  if ($(window).scrollTop() + $(window).height() == $(document).height()) {
    // Trigger Ajax query to load more content
  }
});

Ce code calcule la distance entre le haut de la fenêtre et le bas (scrollTop) et ajoute la hauteur de la fenêtre. . Si cette somme est égale à la hauteur totale du document, nous savons que l'utilisateur a atteint la fin.

Détermination de la proximité vers le bas

Si vous souhaitez charger le contenu avant l'utilisateur atteint le bas, vous pouvez ajuster la condition comme suit :

$(window).scroll(function() {
  if ($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
    // Trigger Ajax query to load more content
  }
});

Ici, nous vérifions si la somme dépasse la hauteur du document moins 100 pixels (ajustez cette valeur au seuil souhaité).

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!