IntersectionObserver API och tröskelvärden

Varje post har target (det observerade elementet), isIntersecting (booleskt värde), intersectionRatio (0 till 1), boundingClientRect, intersectionRect och time. Använd isIntersecting för binära synlighetskontroller och intersectionRatio för logik baserad på hur stor andel som är synlig.

{ threshold: 0.5 } kör callbacken varje gång överlappningsgraden passerar 50 %. Använd en array, [0, 0.25, 0.5, 0.75, 1], för att köra den vid varje fjärdedel – användbart för att skapa förloppsindikatorer eller analyser som rapporterar hur stor procentandel som är synlig.

Som standard mäter observeraren överlappningen med visningsområdet. Ange root: someScrollableDiv för att mäta mot en inre rullningsbehållare – till exempel en virtualiserad lista i en div med fast höjd.

rootMargin: "200px" utökar observationsområdet med 200 pixlar på varje sida. Använd det för att köra tidigare (börja läsa in bilder 200 pixlar innan de kommer in i visningsområdet) eller senare (kör endast när de helt har passerat visningsområdet).

observer.observe(element) börjar observera ett element och observer.unobserve(element) slutar observera det. Sluta alltid observera elementet när callbacken inte längre behövs (till exempel efter att lazy loading har aktiverats en gång) för att frigöra minne.

observer.disconnect() slutar observera alla observerade element. Anropa det när komponenten avmonteras eller observeraren inte längre behövs – det förhindrar läckor från observerare som lever längre än sitt användningsområde.

Callbacker levereras asynkront och i batcher – många förändringar i överlappningen under en snabb rullning resulterar i en callback med alla poster, inte en per element. Det är en stor prestandavinst jämfört med rullningslyssnare som körs vid varje rullningshändelse.

När ni börjar observera ett nytt element körs callbacken en gång nästan omedelbart med det aktuella tillståndet. Det är användbart för att hantera element som redan är synliga när observationen börjar, utan en särskild initieringssökväg.

Lazy loading av bilder, starta animeringar när element rullas in i visningsområdet, oändlig rullning (observera ett sentinel nära listans slut), spåra vilka artiklar användaren faktiskt har läst och växla en sticky-header baserat på hjältelementets synlighet.

IntersectionObserver kör callbacker vid förändringar i elements synlighet, med inbyggd prestandaoptimering och batchning – ersätt rullningslyssnare med det för synlighetslogik. Konfigurera med threshold (0 till 1 eller en array), root (anpassad rullningsbehållare) och rootMargin (utöka eller krymp observationsområdet). Använd observe/unobserve för specifika element och disconnect för att rensa bort allt.