Werk uitstellen tot scrollen is beëindigd

Scrollen op het web moet soepel en responsief zijn. Als je zware taken uitvoert tijdens het scrollen, zoals herberekeningen van de vormgeving, tracking van analytische gegevensbakens of dynamische DOM-updates, kan de hoofdthread overbelast raken. Dit leidt tot verloren frames en layout thrashing.

In het verleden vertrouwden ontwikkelaars op het debouncen van de gebeurtenis scroll met setTimeout() om te raden wanneer een scroll is voltooid. Deze debounced functies zijn echter berucht onbetrouwbaar. Ze kunnen worden geactiveerd terwijl de gebruiker nog scrollt.

Het evenement scrollend biedt een zeer betrouwbare, prestatiegerichte oplossing. De browser activeert een scrollend-gebeurtenis precies wanneer een scroll is gestopt, alle overgangen zijn afgerond en een aanraakgebaar is losgelaten.

Implementeren

Zo implementeer je een patroon voor uitgesteld werk:

1. Een scrollbare container instellen: Maak een container met overflow: auto of overflow: scroll.
2. Luisteren naar scroll-gebeurtenissen: Gebruik deze listener alleen voor basis dynamische statistieken of informatieve opmaakstijlen. Voer hier geen zwaar werk uit.
3. Luisteren naar scrollend-gebeurtenissen: Registreer een scrollend-callback in de scrollcontainer of het document zelf.
4. Duur werk uitvoeren in de callback: Hier kun je veilig dynamische content ophalen of uitgebreide DOM-indelingen activeren.

Voorbeeldcode

.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 implementatie en best practices

• Gebruik WEL scrollend in plaats van debounced scroll-gebeurtenissen als u bakens voor vormgevingsgegevens activeert of dynamisch nieuwe contentvormgeving ophaalt.
• WEL: Combineer dit met scrollSnapChange- of scrollSnapChanging-snapinteracties als je carrousels of dia's met getuigenissen maakt.
• Bundel GEEN indelingsafhankelijke dynamische updates in dynamische visuele scroll-callbacks.
• WEL rekening houden met het feit dat zoomen en scrollen in de visuele viewport de gebeurtenis scrollend correct activeert.

Reservestrategie

Voor niet-ondersteunde browsers valt u terug op een debounced scroll-gebeurtenis met setTimeout om een aangepaste scrollend-gebeurtenis te verzenden.

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