Maison > Article > interface Web > Comprendre et implémenter Infinite Scroll avec JavaScript

Comprendre et implémenter Infinite Scroll avec JavaScript

王林original: 2024-07-23 12:35:31693parcourir

Entendendo e Implementando o Scroll Infinito com JavaScript

Qu'est-ce que le parchemin infini ?

Vous avez peut-être déjà vu des sites comme des boutiques en ligne où, lorsque vous faites défiler la page, des produits apparaissent en continu. Un autre exemple est unlimited.horse, cela peut paraître simple mais c'est un excellent exemple pour démontrer la fonctionnalité de "Infinite Scrolls". Lorsque vous accédez au site, vous voyez un cheval, mais lorsque vous faites défiler la page, vous vous rendez compte que les jambes du cheval continuent de grandir indéfiniment, et vous n'atteignez jamais les pieds du cheval.

Implémentation du défilement infini

Cette fonctionnalité est largement utilisée dans le développement moderne. Nous pouvons voir le défilement infini en action sur les principaux réseaux sociaux, tels que Twitter, Facebook et surtout Instagram, où le contenu semble ne jamais s'arrêter à mesure que l'on fait défiler la page.

Dans cet article, je vais démontrer une implémentation de base de cette fonctionnalité. Cependant, cette approche ne résout pas les problèmes tels que les problèmes liés aux requêtes longues, la mise en œuvre de la mise en cache et d'autres solutions requises pour les applications de production. Il s’agit néanmoins d’un point de départ pour comprendre comment nous pouvons mettre en œuvre cette fonctionnalité.

Étape 1 : Décidez où ajouter la fonctionnalité de défilement infini

Tout d’abord, décidez où vous allez ajouter la fonctionnalité de défilement infini. S'agira-t-il d'une liste de messages ou d'images ? Vous devrez également décider d’où proviendront les données. Pour cet exemple, nous utiliserons des images issues d'une API de base, l'API Random Fox.

Étape 2 : Créez votre fichier HTML

Créez le fichier HTML et incluez un conteneur pour vos images de renard aléatoires.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fox Images</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 class="header">Fox Images</h1>
<div class="container"></div>
<script src="script.js"></script>
</body>
</html>

Étape 3 : Créez votre fichier CSS

Pour cet exemple, nous garderons la feuille de style très simple.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.header {
  font-size: 32px;
  color: black;
  text-align: center;
  font-family: Verdana, sans-serif;
}

img {
  width: 400px;
  height: 400px;
  margin: 4px;
  object-fit: cover;
}

Étape 4 : Créez votre fichier JavaScript

Sélectionnez le conteneur et obtenez l'URL de l'API Random Fox. N'oubliez pas de lier vos fichiers JavaScript et CSS dans le HTML.

const container = document.querySelector('.container');
const URL = "https://randomfox.ca/images/";

function getRandomNumber() {
  return Math.floor(Math.random() * 100);
}

function loadImages(numImages = 6) {
  let i = 0;
  while (i < numImages) {
    const img = document.createElement('img');
    img.src = `${URL}${getRandomNumber()}.jpg`;
    container.appendChild(img);
    i++;
  }
}

loadImages();

Étape 5 : ajouter l'événement de défilement

Pour implémenter la fonctionnalité de défilement infini, ajoutez cet écouteur d'événement :

window.addEventListener('scroll', () => {
  if (window.scrollY + window.innerHeight >= document.documentElement.scrollHeight) {
    loadImages();
  }
});

Si la somme de scrollY et innerHeight est supérieure ou égale à scrollHeight, cela signifie que nous avons atteint la fin du document et que nous devons donc charger plus d'images.

Conclusion

Votre page devrait maintenant être fonctionnelle avec la technique du défilement infini. Voici un défi pour vous : essayez de refaire ce projet en utilisant une autre API de votre choix, implémentez également un style plus élaboré pour afficher vos éléments. Bonne chance !

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!

JavaScript css html for Event

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Tests de régression visuelle avec Cypress et Percy : un guide completArticle suivant：Tests de régression visuelle avec Cypress et Percy : un guide complet

Articles Liés

Voir plus