IntersectionObserver API og tærskler

Hver post har target (det overvågede element), isIntersecting (en boolesk værdi), intersectionRatio (fra 0 til 1), boundingClientRect, intersectionRect og time. Brug isIntersecting til binære synlighedstjek og intersectionRatio til logik baseret på den synlige procentdel.

{ threshold: 0.5 } udløser tilbagekaldet, hver gang overlapningsforholdet krydser 50 %. Brug et array som [0, 0.25, 0.5, 0.75, 1] for at udløse det ved hver fjerdedel — det er nyttigt til at opbygge statusindikatorer eller analyser, der rapporterer, hvor mange procent der er synlige.

Som standard måler observatøren overlapningen med visningsområdet. Sæt root: someScrollableDiv for at måle i forhold til en indre rullecontainer — for eksempel en virtualiseret liste i en div med fast højde.

rootMargin: "200px" udvider observationsområdet med 200 pixels på alle sider. Brug den til at udløse tidligere (start indlæsning af billeder 200 pixels før de kommer ind i visningsområdet) eller senere (udløs kun, når elementet helt har passeret visningsområdet).

observer.observe(element) starter overvågningen af et element; observer.unobserve(element) stopper den. Afregistrer altid elementet, når du ikke længere har brug for tilbagekaldet (for eksempel efter at indlæsning efter behov er udløst én gang), så hukommelsen frigives.

observer.disconnect() stopper overvågningen af alle overvågede elementer. Kald den, når komponenten afmonteres, eller observatøren ikke længere er nødvendig — det forhindrer hukommelseslækager fra observatører, der lever længere end deres anvendelse.

Tilbagekald leveres asynkront og samles i grupper — mange ændringer i overlapningen under hurtig rulning udløser ét tilbagekald med alle poster, ikke ét pr. element. Det er en stor ydeevnefordel sammenlignet med lyttere på rulning, der udløses ved hver rullehændelse.

Når du begynder at overvåge et nyt element, udløses tilbagekaldet næsten med det samme én gang med den aktuelle tilstand — det er nyttigt til at håndtere elementer, der allerede er synlige, når overvågningen begynder, uden en særskilt initialiseringssti.

Indlæsning af billeder efter behov, udløsning af animationer, når de rulles ind i visningen, uendelig rulning (overvåg et sentinel-element nær listens slutning), registrering af hvilke artikler brugeren faktisk har læst, og skift af fastgjort sidehoved baseret på heltens synlighed.

IntersectionObserver udløser tilbagekald ved skift i elementers synlighed med indbygget ydeevneoptimering og gruppering — erstat lyttere på rulning med den til synlighedslogik. Konfigurér den med threshold (fra 0 til 1 eller et array), root (en tilpasset rullecontainer) og rootMargin (udvid eller formindsk observationsområdet). Brug observe/unobserve til enkelte elementer; disconnect rydder alt op.