Cette approche permet de maintenir les visiteurs engagés plus longtemps et offre une expérience de navigation transparente. La mise en œuvre du défilement infini avec JavaScript est simple et peut être personnalisée pour répondre aux différents besoins du site, des flux de médias sociaux aux listes de produits du commerce électronique. Dans cet article, nous explorerons les raisons, comment et les meilleures pratiques du défilement infini, avec des exemples de code élargis et des considérations de performance.

Pourquoi utiliser Infinite Scroll?

Le défilement infini offre plusieurs avantages qui ont une incidence directe sur l'engagement des utilisateurs et sur la performance du site :

  • Réduit le besoin de pagination:[ En éliminant les rechargements de page et les clics manuels, la navigation devient plus fluide et plus intuitive.
  • Encourage la découverte du contenu:[ Comme les nouveaux articles se chargent automatiquement, les visiteurs sont plus susceptibles de voir des articles, des produits ou des messages supplémentaires qu'ils pourraient autrement manquer.
  • Améliore les paramètres de l'engagement des utilisateurs:[ Le temps sur la page, les pages par session et la profondeur du défilement augmentent souvent parce que le flux naturel de navigation est maintenu.
  • Fournit une expérience utilisateur moderne et dynamique: De nombreuses plateformes populaires comme Twitter, Pinterest et Instagram utilisent un défilement infini pour créer une sensation de type app sur le web.

Cependant, le défilement infini n'est pas approprié pour chaque contexte. Les sites où les utilisateurs doivent trouver rapidement des éléments spécifiques (par exemple, des listes de répertoires ou des résultats de recherche) peuvent bénéficier d'une pagination classique avec un pied de page ou un bouton "Load More".

Mise en œuvre de base de la défilement infini

La mise en œuvre d'un rouleau infini de base implique l'écoute de l'événement et l'ajout de nouveaux contenus lorsque l'utilisateur approche du bas de la page.

Structure HTML

Configurez un élément conteneur qui contient le contenu initial. Tous les nouveaux éléments seront joints ici.

<div id="content">
 <!-- Existing items loaded on page load -->
 <div class="item">Item 1</div>
 <div class="item">Item 2</div>
 <div class="item">Item 3</div>
</div>
<div id="loading-indicator" style="display:none;">Loading more content...</div>

Exemple de JavaScript

En utilisant l'événement de défilement, nous décelons quand l'utilisateur a défilé près du bas de la page. Le seuil () empêche le déclencheur de tirer trop tard.

const contentDiv = document.getElementById('content');
const loadingIndicator = document.getElementById('loading-indicator');
let isLoading = false; // Prevent duplicate requests

window.addEventListener('scroll', () => {
 const scrollPosition = window.innerHeight + window.scrollY;
 const documentHeight = document.body.offsetHeight;

 if (scrollPosition >= documentHeight - 200 && !isLoading) {
 loadMoreContent();
 }
});

async function loadMoreContent() {
 isLoading = true;
 loadingIndicator.style.display = 'block';

 try {
 // Simulate fetching new content from server
 const newItem = document.createElement('div');
 newItem.className = 'item';
 newItem.textContent = `New item loaded at ${new Date().toLocaleTimeString()}`;
 contentDiv.appendChild(newItem);
 } finally {
 isLoading = false;
 loadingIndicator.style.display = 'none';
 }
}

Améliorer la mise en œuvre

Pour un rouleau infini prêt à la production, les performances et l'expérience utilisateur doivent être affinées.

Dénonciation de l'événement de défilement

L'événement de défilement brut s'allume rapidement, ce qui peut dégrader les performances. L'utilisation d'une fonction de débonflage permet de ne faire fonctionner le contrôle qu'après une brève pause dans le défilement.

function debounce(func, wait) {
 let timeout;
 return function executedFunction(...args) {
 clearTimeout(timeout);
 timeout = setTimeout(() => func.apply(this, args), wait);
 };
}

window.addEventListener('scroll', debounce(checkScrollPosition, 100));

Utilisation de l'API d'observateur d'intersection

Une approche plus efficace et moderne est l'Intersection Observer. Elle surveille un élément sentinelle placé au bas du contenu et déclenche un rappel lorsqu'il devient visible.

const sentinel = document.createElement('div');
sentinel.id = 'scroll-sentinel';
contentDiv.after(sentinel);

const observer = new IntersectionObserver((entries) => {
 if (entries[0].isIntersecting && !isLoading) {
 loadMoreContent();
 }
});
observer.observe(sentinel);

Cela élimine la nécessité de fixer un auditeur parchemin et est significativement plus léger sur le fil principal.

Gestion gracieusement de la fin de contenu

Lorsqu'il n'y a plus de données, le défilement infini devrait cesser d'essayer de charger. Un simple drapeau ou une réponse du serveur avec une propriété peut contrôler cela.

let hasMoreContent = true;

async function loadMoreContent() {
 if (!hasMoreContent) return;
 // ... fetch data
 if (response.data.length === 0) hasMoreContent = false;
}

Chargement de données réelles avec AJAX

Pour rendre dynamique le défilement infini, vous devez récupérer les données d'un serveur en utilisant AJAX. L'API de Fetch est le standard moderne.

Saisissez l'exemple d'API

Cet exemple suppose que votre serveur fournit des données JSON paginées avec une URL ou un paramètre de numéro de page.

const contentUrl = '/api/items?page=1';
let currentPage = 1;

async function loadMoreContent() {
 isLoading = true;
 loadingIndicator.style.display = 'block';

 try {
 const response = await fetch(`/api/items?page=${++currentPage}`);
 if (!response.ok) throw new Error('Network error');
 const data = await response.json();

 data.items.forEach(item => {
 const el = document.createElement('div');
 el.className = 'item';
 el.textContent = item.title;
 contentDiv.appendChild(el);
 });

 // If the server indicates no more data, disable loading
 if (data.is_last_page) hasMoreContent = false;
 } catch (error) {
 console.error('Failed to load content:', error);
 } finally {
 isLoading = false;
 loadingIndicator.style.display = 'none';
 }
}

Traitement des réponses et des erreurs du serveur

Toujours inclure la gestion d'erreur robuste. Afficher une option de réessayer si la récupération échoue, et éviter les boucles de chargement infinies en limitant les réticules. Pour une meilleure expérience utilisateur, afficher un message "Quelque chose s'est mal passé" avec un bouton "Essayez à nouveau".

Améliorations de l'expérience utilisateur

L'UX lisse est essentielle pour retenir les utilisateurs. Voici quelques améliorations à considérer.

Indicateurs de chargement

Utilisez un spinner, une barre de progression ou des écrans squelettes pour indiquer que plus de contenu est récupéré. Cela rassure les utilisateurs que le site fonctionne.

<div id="loading" class="loading-spinner"></div>

Les animations CSS pour spinners sont légères. Pour les écrans squelettes, créez des blocs de placeholder qui imitent la mise en page finale du contenu.

Considérations relatives à l'accessibilité

Un défilement infini accessible nécessite :

  • Gestion des focus:[ Lorsque de nouveaux éléments se chargent, annoncez-les pour les sélectionner en utilisant les régions .
  • Navigation par clavier:[ Assurez-vous que les utilisateurs peuvent traverser le contenu nouvellement chargé via le clavier (Tab).
  • Supplément au défilement infini: Fournissez un bouton "Load More" comme un retour pour les utilisateurs qui préfèrent le contrôle explicite.
<div id="content" aria-live="polite">...</div>

Optimisation mobile

Sur les appareils mobiles, le défilement s'allume fréquemment, mais l'observateur d'Intersection est plus fiable.

Techniques avancées

Pour les situations de haute performance comme les flux de médias sociaux ou les grands catalogues, considérez ces optimisations.

Chargement des images paresseux

Le nouveau contenu inclut souvent des images. Chargez-les paresseusement en utilisant l'attribut sur les balises ou Intersection Observer pour réduire la bande passante et améliorer le temps de charge initial.

<img src="placeholder.jpg" data-src="real-image.jpg" loading="lazy" alt="..." />

défilement virtuel pour les grandes listes

Si votre défilement infini gère des milliers de nœuds DOM, les performances se dégradent. La défilement virtuel (ou la fenêtre) ne rend que les éléments visibles, réduisant considérablement l'utilisation de la mémoire. Des bibliothèques comme Clusterize.js ou React Virtualized peuvent aider, mais des implémentations de JavaScript pures sont possibles pour des cas simples.

Préchargement du contenu

Pour éliminer le décalage perçu, préchargez le prochain lot de contenu dans un conteneur caché avant qu'il ne soit nécessaire. Lorsque l'utilisateur défile vers le point de déclenchement, il suffit de transférer les éléments préchargés dans le DOM visible.

Conclusion

Implémenter un défilement infini avec JavaScript peut améliorer significativement l'engagement des utilisateurs en leur offrant une expérience de navigation fluide et continue. De l'auditeur basique au défilement avancé Intersection Observer et le chargement paresseux, la technique peut être adaptée aux besoins de n'importe quel site web. N'oubliez pas d'équilibrer les performances et l'accessibilité, et toujours fournir des mécanismes de repli pour les utilisateurs qui préfèrent la pagination discrète.