IntersectionObserver

IntersectionObserver er en ofte overset Javascript API, der kan bruges til at forstå synligheden og placeringen af DOM-elementer i forhold til et overordnet element eller til dokumentets viewport (“root”). Positionen leveres asynkront og er nyttig til at afdække f.eks. hvor langt brugeren har scrollet ned på en side og hvilke elementer, der har været synlige. Er annoncer rent faktisk blevet set af brugeren?  IntersectionObserver er ligeledes nyttig ved eksempelvis implementering af udskudt indlæsning af DOM-indhold. 

IntersectionObserver er understøttet af alle relevante browsere (Safari fra ver. 12.2). Se “Can I Use It“.

Observeren initialiseres med 

const observer = new IntersectionObserver(callback,options);
observer.observe(target);

IntersectionObserver tager to parametre: reference til en callback-funktion og options. De præ-definerede værdier for options er

var options = {
  root: null,
  rootMargin: '0px',
  threshold: 1.0
}

Root henviser til elementet, der bruges som viewport for at kontrollere synligheden af det undersøgte element. Det kan sættes til et parent-element. Ved null anvendes browserens viewport. 

rootMargin giver mulighed for at definere en margin rundt om root-elementet. Format er en streng med margin-angivelse som i CSS, feks. “10px 10px 10px 10px”. Procentangivelse er også gyldig.

threshold kan enter være angivet som et enkelt tal (double) eller array af to eller flere tal mellem 0 og 1, f.eks.  [0, 0.25,  0.5, 0.75, 1]. Threshold angiver hvor stor en procentdel af elementer, der skal være synlig før callback aktiveres. I sidstnævnte eksempel altså ved 0, 25%, 50% og 100%. Anvender du default-værdier for options få du altså et callback når elementer er 100% synligt,

Et eller flere DOM-elementer, der skal observeres angiver du i observe(target).

const intersectItem = document.querySelectorAll('.item');
intersectItem.forEach(item => {
	observer.observe(item);
});

ELLER

var target = document.querySelector('#listItem');
observer.observe(target);

DOM-elementer kan efterfølgende fjernes fra observationslisten med

observer.unobserve(target);
ELLER
observer.disconnect();

Når der sker ændringer i synligheden af eller eller flere observerede elementer returnerer callback et array med objektet IntersectionObserverEntry for alle observerede elementer.

Objektet giver dig rect-oplysninger for både elementet og den del af elementet, der er synligt. I ovenstående tilfælde er elementet i sin fulde størrelse 404px højt. 179.1875px er synlig, hvilket giver intersectionRatio på 0.44 – altså at 44% af elementet er synligt. Time angiver tid i milllisekunder forløbet siden page-load.

Brug den booleanske variable isIntersected til at filtrere de relevante elementer:

let callback = (entries, observer) =>{ 
entries.forEach(entry => {
  if (entry.isIntersecting) {
      // Din kode her
  }
});

IntersectionObserver er et nyttigt redskab til de formål, som API’en er skabt til. Callback bør ikke overlæsses med arbejdsopgaver og det skal erindres at IntersectionObserver by-design giver kaldet lav prioritet og gennemføres, når browseren har ledig tid til det. 

LINKS:

MDN web docs: Intersection Obsrver API
W3C Working Draft Nov. 2018: Intersection Observer