L'événement scrollend

L'événement scrollend est une nouvelle API standardisée pour détecter la fin du défilement dans une page web.

Durant des années nous avons du jongler avec moult événements, astuces JavaScript et calculs pour attraper l'action de scroll, notamment le combiner à un debounce : cette approche consistait à déclencher un timer à chaque événement de défilement et à considérer que le scroll était terminé si aucun nouvel événement ne survenait pendant un certain délai, typiquement 100 à 200 millisecondes, selon la lourdeur de la page et la réactivité attendue.

Avant scrollend

Les inconvénients étaient des faux positifs lors de pauses qui n'en étaient pas vraiment, la consommation de ressources (processeur, carte graphique), et le délai choisi restait approximatif. De plus, on ne prenait pas en compte les animations de défilement fluide ou les gestes tactiles avec inertie.

// Approche classique/ancienne avec debounce ⚠️
let scrollTimer = null;

window.addEventListener('scroll', function() {
  // Annuler le timer précédent si le scroll continue
  if (scrollTimer !== null) {
    clearTimeout(scrollTimer);
  }

  // Définir un nouveau timer
  scrollTimer = setTimeout(function() {
    // Code exécuté "à la fin" du scroll
    console.log('Scroll terminé (probablement)');

    // Exemple : charger plus de contenu
    loadMoreContent();

    // Exemple : enregistrer la position de lecture
    trackScrollDepth();
  }, 150); // Délai arbitraire de 150ms
}, false);

Avec scrollend

Désormais scrollend (disponible dans tous les navigateurs) est aussi simple à utiliser que n'importe quel événement natif du navigateur. Il suffit d'ajouter un écouteur sur l'élément défilable concerné, que ce soit la fenêtre principale ou un conteneur spécifique.

// Avec scrollend ✅
window.addEventListener('scrollend', function() {
  // Code exécuté réellement à la fin du scroll
  console.log('Scroll terminé');

  // Exemple : charger plus de contenu
  loadMoreContent();

  // Exemple : enregistrer la position de lecture
  trackScrollDepth();
});

L'événement se déclenche de manière fiable dans tous les scénarios de défilement : que l'utilisateur utilise la molette de la souris, fasse glisser la barre de défilement, utilise les touches du clavier, effectue un geste tactile sur mobile/tablette, ou même lorsqu'un défilement programmé via scrollTo() ou scrollIntoView() se termine.

Pour le lazy-loading cet événement permet de déclencher le chargement de nouvelles données uniquement lorsque l'utilisateur a réellement terminé son défilement, y compris en infinite scroll, évitant ainsi des requêtes prématurées. On peut aussi parfaitement l'utiliser pour afficher des indicateurs de position de lecture qui se mettent à jour de façon plus pertinente, même si on peut le faire de manière encore plus élégante en CSS : Les Animations liées au scroll avec CSS.

Enfin pour les adeptes du tracking, scrollend permet de savoir jusqu'où les internautes défilent réellement dans une page, plutôt que de se baser sur des approximations.

Support navigateur et adoption

D'après Can I Use : scrollend on est plutôt à l'aise car tous les navigateurs majeurs le supportent (Chrome, Edge, Firefox, Safari). Nul besoin de polyfill.