Reporter le travail jusqu'à la fin du défilement

Le défilement sur le Web doit être fluide et réactif. L'exécution de tâches lourdes (comme le recalcul de la mise en page, le suivi des balises de données analytiques ou les mises à jour dynamiques du DOM) pendant le défilement peut saturer le thread principal, ce qui entraîne des pertes d'images et un thrashing de la mise en page.

Auparavant, les développeurs s'appuyaient sur la fonctionnalité anti-rebond de l'événement scroll à l'aide de setTimeout() pour deviner quand un défilement était terminé. Cependant, ces fonctions anti-rebond sont notoirement peu fiables. Elles peuvent se déclencher pendant que l'utilisateur fait défiler la page.

L'événement scrollend offre une solution très fiable et axée sur les performances. Le navigateur déclenche un événement scrollend exactement lorsqu'un défilement s'est arrêté, que toutes les transitions sont terminées et qu'un geste tactile a été relâché.

Implémentation

Pour implémenter un modèle de report de travail :

1. Configurer un conteneur à défilement : créez un conteneur avec overflow: auto ou overflow: scroll.
2. Écouter les événements scroll : n'utilisez cet écouteur que pour les métriques dynamiques de base ou le style de mise en page informatif. N'exécutez pas de tâches lourdes ici.
3. Écouter les événements scrollend : enregistrez un rappel scrollend sur le conteneur de défilement ou sur le document lui-même.
4. Exécuter des tâches coûteuses dans le rappel : c'est à ce moment-là que vous pouvez récupérer du contenu dynamique ou déclencher des mises en page DOM complètes en toute sécurité.

Exemple de code

.scroll-container {
  height: 300px;
  overflow-y: auto;
}

const scroller = document.querySelector('.scroll-container');

// 1. Informative feedback during scroll
scroller.addEventListener('scroll', () => {
  // Avoid dynamic heavier data updates here
  console.log('Scrolling dynamically... updates deferred');
});

// 2. Safe callback when scrolling rests
scroller.addEventListener('scrollend', () => {
  // Run layout recalculations or analytical beacons updates here
  const currentVisibleSection = findMostVisibleSection(scroller);
  fetchAdditionalData(currentVisibleSection);
});

Implémentation stratégique et bonnes pratiques

• À FAIRE : Utilisez scrollend au lieu d'événements scroll anti-rebond lorsque vous déclenchez des balises de données de mise en page ou que vous récupérez dynamiquement une nouvelle mise en page de contenu.
• À FAIRE : Envisagez d'associer cette fonctionnalité aux interactions d'alignement scrollSnapChange ou scrollSnapChanging si vous créez des carrousels ou des galeries de témoignages.
• NE regroupez PAS les mises à jour dynamiques dépendantes de la mise en page dans les rappels de défilement visuel dynamique.
• À FAIRE : tenez compte du fait que le zoom et le défilement de la fenêtre d'affichage visuelle déclenchent correctement l'événement scrollend.

Stratégie de remplacement

Pour les navigateurs non compatibles, utilisez un événement scroll avec setTimeout pour envoyer un événement scrollend personnalisé.

function initializeDemo() {
  const scroller = document.querySelector('#scroller');
  scroller.addEventListener('scrollend', () => {
    // Safe execution
  });
}

if ('onscrollend' in window) {
  initializeDemo();
} else {
  initializeDemo();
  const scroller = document.querySelector('#scroller');
  scroller.addEventListener('scroll', () => {
    clearTimeout(window.scrollendtimer);
    window.scrollendtimer = setTimeout(() => {
      scroller.dispatchEvent(new CustomEvent('scrollend'));
    }, 100);
  });
}