Odrocz pracę do zakończenia przewijania

Przewijanie w internecie powinno być płynne i szybkie. Wykonywanie ciężkich zadań, takich jak ponowne obliczanie układu, śledzenie sygnałów danych analitycznych czy dynamiczne aktualizacje DOM, podczas przewijania może obciążyć wątek główny, co prowadzi do pomijania klatek i problemów z układem.

W przeszłości deweloperzy musieli polegać na debouncingu zdarzenia scroll za pomocą setTimeout(), aby odgadnąć, kiedy przewijanie się zakończyło. Te funkcje są jednak bardzo zawodne. Mogą się uruchamiać, gdy użytkownik nadal przewija stronę.

Zdarzenie scrollend to wysoce niezawodne rozwiązanie oparte na wydajności. Przeglądarka wywołuje zdarzenie scrollend dokładnie wtedy, gdy przewijanie zostało zatrzymane, wszystkie przejścia zostały zakończone, a gest dotykowy został zwolniony.

Jak to zrobić?

Aby wdrożyć wzorzec odraczania pracy:

1. Skonfiguruj kontener z możliwością przewijania: utwórz kontener z overflow: auto lub overflow: scroll.
2. Nasłuchiwanie zdarzeń scroll: używaj tego detektora tylko w przypadku podstawowych danych dynamicznych lub informacyjnego stylu układu. Nie wykonuj tu ciężkich zadań.
3. Nasłuchiwanie zdarzeń scrollend: zarejestruj wywołanie zwrotne scrollend w kontenerze przewijania lub w samym dokumencie.
4. Wykonywanie kosztownych operacji w wywołaniu zwrotnym: w tym miejscu można bezpiecznie pobierać zawartość dynamiczną lub wywoływać złożone układy DOM.

Przykładowy kod

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

Strategiczne wdrażanie i sprawdzone metody

• UŻYWAJ scrollend zamiast zdarzeń scroll z ograniczoną częstotliwością podczas uruchamiania sygnałów danych układu lub dynamicznego pobierania nowego układu treści.
• DO consider pairing this with scrollSnapChange or scrollSnapChanging snap interactions if you're building carousels or testimonial galleries slides.
• NIE grupuj aktualizacji dynamicznych zależnych od układu w wywołaniach zwrotnych dynamicznego przewijania wizualnego.
• PAMIĘTAJ, że powiększanie i przewijanie widocznego obszaru prawidłowo wywołuje zdarzenie scrollend.

Strategia zastępcza

W przypadku nieobsługiwanych przeglądarek użyj zdarzenia scroll z setTimeout, aby wysłać zdarzenie niestandardowe scrollend.

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