Comment utiliser JavaScript pour implémenter le défilement infini ?

Comment utiliser JavaScript pour implémenter le défilement infini ?

Le défilement infini est devenu très populaire dans la conception de sites Web modernes. Cette fonctionnalité aide les utilisateurs à faire défiler la page pour charger du nouveau contenu sans avoir à cliquer sur le bouton de la page. Dans cet article, nous présenterons comment utiliser JavaScript pour implémenter le défilement infini et fournirons des exemples de code spécifiques.

Pour implémenter la fonction de rotation de page à défilement infini, nous devons écouter les événements de défilement de l'utilisateur et charger du nouveau contenu lorsque la page défile vers une position spécifique. Voici les étapes pour implémenter cette fonctionnalité :

1. Créer une structure HTML

Tout d'abord, nous devons créer un conteneur avec du contenu pour afficher le nouveau contenu que nous avons chargé. Supposons que l'identifiant de ce conteneur soit "content". À l’intérieur de ce conteneur, nous pouvons placer tout type de contenu, comme des articles, des images, des vidéos, etc. Dans le même temps, un élément d'invite de chargement doit être ajouté au bas de la page pour informer l'utilisateur que le contenu est en cours de chargement. Supposons que l'identifiant de cet élément d'invite de chargement soit "loading".

2. Écouter les événements de défilement

Ensuite, nous devons écouter les événements de défilement de l'utilisateur. Nous pouvons utiliser l'événement scroll de JavaScript pour réaliser cette fonction. Lorsque l'utilisateur fait défiler la page, le navigateur déclenchera l'événement de défilement et nous pourrons effectuer les opérations correspondantes dans la fonction de rappel d'événement.

window.addEventListener("scroll", function() {
  // 在这里执行加载新内容的操作
});

3. Déterminer la position de défilement

Lorsque l'utilisateur fait défiler la page, nous devons déterminer si la position de défilement répond aux conditions de chargement d'un nouveau contenu. De manière générale, lorsque vous scrollez vers le bas de la page, vous pouvez déclencher le chargement d'un nouveau contenu.

window.addEventListener("scroll", function() {
  var content = document.getElementById("content");
  var loading = document.getElementById("loading");

  // 页面的整体高度
  var windowHeight = window.innerHeight;
  // 滚动条滚动的距离
  var scrollHeight = window.scrollY;
  // 内容容器的高度
  var contentHeight = content.clientHeight;
  // 加载提示元素距离页面顶部的距离
  var loadingOffsetTop = loading.offsetTop;

  // 判断是否滚动到页面底部
  if (windowHeight + scrollHeight >= contentHeight - loadingOffsetTop) {
    // 在这里执行加载新内容的操作
  }
});

4. Chargement d'un nouveau contenu

Lors du défilement vers le bas de la page, nous pouvons effectuer l'opération de chargement d'un nouveau contenu. Ici, nous supposons qu'il existe une fonction loadMore pour charger du nouveau contenu.

window.addEventListener("scroll", function() {
  var content = document.getElementById("content");
  var loading = document.getElementById("loading");

  var windowHeight = window.innerHeight;
  var scrollHeight = window.scrollY;
  var contentHeight = content.clientHeight;
  var loadingOffsetTop = loading.offsetTop;

  // 判断是否滚动到页面底部
  if (windowHeight + scrollHeight >= contentHeight - loadingOffsetTop) {
    loadMore();
  }
});

function loadMore() {
  // 在这里执行加载新内容的操作
}

Dans la fonction loadMore, vous pouvez utiliser des requêtes Ajax ou d'autres méthodes pour charger un nouveau contenu et l'ajouter au conteneur "content".

Grâce aux étapes ci-dessus, nous pouvons implémenter une fonction de base de rotation de page à défilement infini. Lorsque l'utilisateur fait défiler vers le bas de la page, le nouveau contenu est chargé sans avoir à cliquer sur un bouton de changement de page.

Il convient de noter que afin d'améliorer les performances et l'expérience utilisateur, nous pouvons ajouter certaines conditions de jugement avant de charger un nouveau contenu, comme juger s'il est en cours de chargement, s'il y a un nouveau contenu à charger, etc. De plus, nous pouvons également utiliser des fonctions de limitation ou des fonctions anti-shake pour réduire la fréquence des événements de défilement afin de réduire les opérations de chargement inutiles.

Pour résumer, la fonction de défilement infini des pages est l'une des fonctions les plus courantes dans la conception de sites Web modernes. En écoutant les événements de défilement et en chargeant du nouveau contenu en fonction de la position de défilement, nous pouvons offrir aux utilisateurs une expérience de navigation plus fluide. L'implémentation de cette fonction à l'aide de JavaScript est très simple et ne nécessite que quelques lignes de code. J'espère que cet article vous aidera !

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!