IntersectionObserver API en drempelwaarden

Elke entry heeft target (het geobserveerde element), isIntersecting (boolean), intersectionRatio (0 tot 1), boundingClientRect, intersectionRect en time. Gebruik isIntersecting voor controles op zichtbaarheid als aan/uit; gebruik intersectionRatio voor logica op basis van het zichtbare percentage.

{ threshold: 0.5 } roept de callback aan telkens wanneer de intersectieverhouding de grens van 50% overschrijdt. Gebruik een array [0, 0.25, 0.5, 0.75, 1] om bij elk kwart te reageren — handig voor voortgangsindicatoren of analyses die "% zichtbaar" rapporteren.

Standaard meet de observer de intersectie met de viewport. Stel root: someScrollableDiv in om te meten ten opzichte van een interne scrollcontainer — bijvoorbeeld een gevirtualiseerde lijst in een div met vaste hoogte.

rootMargin: "200px" vergroot het observatiegebied aan elke kant met 200 pixels. Gebruik dit om eerder te reageren (begin 200px voordat afbeeldingen de viewport binnenkomen met laden) of later (reageer pas wanneer ze volledig buiten de viewport zijn).

observer.observe(element) begint een element te observeren; observer.unobserve(element) stopt daarmee. Voer unobserve altijd uit wanneer je de callback niet meer nodig hebt (bijvoorbeeld nadat uitgesteld laden één keer is geactiveerd), zodat geheugen wordt vrijgemaakt.

observer.disconnect() stopt het observeren van alle geobserveerde elementen. Roep dit aan wanneer de component wordt ontkoppeld of de observer niet meer nodig is — zo voorkom je lekken door observers die langer blijven bestaan dan hun toepassing.

Callbacks worden asynchroon en gebundeld geleverd — veel intersectiewijzigingen tijdens snel scrollen leiden tot één callback met alle entries, niet tot één per element. Dat levert een grote prestatiewinst op ten opzichte van scrolllisteners die bij elke scrollgebeurtenis worden uitgevoerd.

Wanneer je een nieuw element observeert, wordt de callback bijna onmiddellijk één keer aangeroepen met de huidige status — handig voor elementen die al zichtbaar zijn wanneer het observeren begint, zonder afzonderlijk initialisatiepad.

Afbeeldingen uitgesteld laden, animaties activeren wanneer ze tijdens het scrollen in beeld komen, oneindig scrollen (observeer een sentinel bij het einde van de lijst), bijhouden welke artikelen een gebruiker daadwerkelijk heeft gelezen, en een vastgezette koptekst omschakelen op basis van de zichtbaarheid van de hoofdbanner.

IntersectionObserver roept callbacks aan bij overgangen in de zichtbaarheid van elementen en biedt ingebouwde prestaties en bundeling — vervang scrolllisteners hiermee voor zichtbaarheidslogica. Configureer de observer met threshold (0 tot 1, of een array), root (aangepaste scrollcontainer) en rootMargin (vergroot of verklein het geobserveerde gebied). Gebruik observe/unobserve voor afzonderlijke elementen; disconnect ruimt alles op.