JavaScript Academy · Les

Zichtbaarheid van elementen observeren

Maak een observer en houd elementen in de gaten.

Les 1 van 413 stappen

Zichtbaarheid van elementen observeren is een gratis JavaScript Academy-les op CoddyKit. Dit is les 1 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject JavaScript Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus JavaScript Academy bevat in totaal 4 lessen.

Waarom Intersection Observer?

Traditioneel betekende detecteren wanneer een element het weergavegebied binnenkomt dat je naar scroll moest luisteren en voortdurend getBoundingClientRect moest aanroepen. Dat is traag en schokkerig.

De Intersection Observer API bewaakt de zichtbaarheid efficiënt en asynchroon, buiten de hoofdthread.

Een observer maken

Je maakt een observer met new IntersectionObserver(callback). De callback wordt uitgevoerd telkens wanneer de zichtbaarheid van een gevolgd element een drempel overschrijdt.

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    console.log(entry.target, entry.isIntersecting);
  });
});

Een element observeren

Roep observer.observe(element) aan om een doelelement te gaan volgen. Eén observer kan meerdere elementen volgen.

const box = document.querySelector('.box');
observer.observe(box);

// Watch several at once:
document.querySelectorAll('.card')
  .forEach(el => observer.observe(el));

De isIntersecting-vlag

Elke entry heeft een booleaanse waarde isIntersecting die aangeeft of het doelelement momenteel de root overlapt (standaard het weergavegebied).

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('element is now visible');
    }
  });
});

Details van een entry

Elke IntersectionObserverEntry bevat nuttige gegevens:

target — het geobserveerde element
isIntersecting — of het doelelement de root kruist
intersectionRatio — hoeveel ervan zichtbaar is (0 tot 1)
boundingClientRect — de rechthoek van het doelelement

(entries) => {
  entries.forEach(e => {
    console.log('visible portion:', e.intersectionRatio);
  });
}

De optie threshold

De optie threshold bepaalt bij welke zichtbaarheidsverhoudingen de callback wordt aangeroepen. Met 0 gebeurt dat zodra één pixel zichtbaar is; met 1 alleen wanneer alles zichtbaar is.

const observer = new IntersectionObserver(callback, {
  threshold: 0.5 // fire when 50% visible
});

// You can pass an array for multiple steps:
// threshold: [0, 0.25, 0.5, 0.75, 1]

De optie root

Standaard meet de observer ten opzichte van de viewport van de browser. Stel root in op een scrollbaar bovenliggend element om de zichtbaarheid binnen die container te meten.

const list = document.querySelector('.scroll-area');
const observer = new IntersectionObserver(callback, {
  root: list // measure visibility inside this container
});

De optie rootMargin

rootMargin vergroot of verkleint het begrenzingsvak van root, net als CSS-marges. Positieve waarden roepen de callback eerder aan, voordat het element daadwerkelijk in beeld is.

const observer = new IntersectionObserver(callback, {
  rootMargin: '200px' // start reacting 200px before visible
});

Stoppen met observeren

Roep observer.unobserve(element) aan om één element niet meer te observeren, of observer.disconnect() om alle elementen niet meer te observeren. Dit is belangrijk voor het opruimen en voor triggers die maar één keer mogen werken.

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      doSomething(entry.target);
      observer.unobserve(entry.target); // fire once
    }
  });
});

Waarom het efficiënt is

De browser berekent doorsnijdingen intern en bundelt meldingen, in plaats van je JavaScript bij elke scrollframe uit te voeren. Zo voorkom je dat de lay-out steeds opnieuw wordt berekend en blijft scrollen soepel, zelfs met veel doel elementen.

Veelvoorkomende toepassingen

Veel functies uit de praktijk gebruiken Intersection Observer:

Afbeeldingen en iframes uitgesteld laden
Oneindig scrollen
Animaties die door scrollen worden gestart
Advertentie- of inhoudsweergaven bijhouden

We bouwen hierna verschillende van deze toepassingen.

Korte toets

Toets je begrip van de basisprincipes van Intersection Observer.

Beantwoord dit in de interactieve les

Samenvatting

Je hebt de basisprincipes van Intersection Observer geleerd:

new IntersectionObserver(callback, options) maakt een observer.
observe begint met observeren; unobserve/disconnect stopt ermee.
Elke entry bevat isIntersecting en intersectionRatio.
threshold, root en rootMargin bepalen wanneer de callback wordt aangeroepen.
Het is veel efficiënter dan luisteraars voor scrollgebeurtenissen.

Vervolgens laden we er afbeeldingen uitgesteld mee.

Gratis beginnen

Leer JavaScript met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 59
Lessen: 200

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Zichtbaarheid van elementen observeren” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad JavaScript Academy, waaronder “Zichtbaarheid van elementen observeren”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus JavaScript Academy bevat in totaal 4 lessen.

Wat leer ik in “Zichtbaarheid van elementen observeren”?

Maak een observer en houd elementen in de gaten. Je oefent met JavaScript Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met JavaScript Academy te beginnen?

Ervaring vooraf is niet nodig. JavaScript Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 1 van 4.

Hoe lang duurt de les “Zichtbaarheid van elementen observeren”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over JavaScript Academy?

Ja. Elke les over JavaScript Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar JavaScript Academy