Arbeit bis zum Ende des Scrollens verschieben

Das Scrollen im Web sollte flüssig und responsiv sein. Das Ausführen rechenintensiver Aufgaben wie Layoutneuberechnungen, Tracking von Analysedaten-Beacons oder dynamische DOM-Updates während des Scrollens kann den Hauptthread überlasten, was zu Frame-Drops und Layout-Thrashing führt.

Bisher haben Entwickler das scroll-Ereignis mit setTimeout() entprellt, um zu schätzen, wann ein Scrollvorgang abgeschlossen ist. Diese Debounce-Funktionen sind jedoch bekanntermaßen unzuverlässig. Sie können ausgelöst werden, während der Nutzer noch scrollt.

Das Ereignis scrollend bietet eine äußerst zuverlässige, leistungsorientierte Lösung. Der Browser löst ein scrollend-Ereignis aus, wenn das Scrollen beendet ist, alle Übergänge abgeschlossen sind und eine Touch-Geste losgelassen wurde.

Implementierung

So implementieren Sie ein Muster für die verzögerte Ausführung:

1. Scrollbaren Container einrichten: Erstellen Sie einen Container mit overflow: auto oder overflow: scroll.
2. Auf scroll-Ereignisse warten: Verwenden Sie diesen Listener nur für grundlegende dynamische Messwerte oder informative Layoutstile. Führe hier keine rechenintensiven Aufgaben aus.
3. Auf scrollend-Ereignisse warten: Registrieren Sie einen scrollend-Callback für den Scrollcontainer oder das Dokument selbst.
4. Aufwendige Arbeit im Callback ausführen: Hier können Sie dynamische Inhalte abrufen oder umfassende DOM-Layouts auslösen.

Beispielcode

.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);
});

Strategische Implementierung und Best Practices

• DO use scrollend instead of debounced scroll events when firing layout data beacons or fetching new content content layout dynamically.
• EMPFOHLEN: Wenn Sie Karussells oder Folien mit Testimonials erstellen, sollten Sie diese mit scrollSnapChange- oder scrollSnapChanging-Snap-Interaktionen kombinieren.
• Fassen Sie layoutabhängige dynamische Aktualisierungen NICHT in dynamischen visuellen Scroll-Callbacks zusammen.
• DO consider that visual viewport zooming and scrolling triggers the scrollend event correctly.

Fallback-Strategie

Bei nicht unterstützten Browsern können Sie auf ein entprelltes scroll-Ereignis mit setTimeout zurückgreifen, um ein benutzerdefiniertes scrollend-Ereignis zu senden.

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);
  });
}