IntersectionObserver API og terskler
Opprett observatører og konfigurer synlighetsterskler
IntersectionObserver API og terskler er en gratis leksjon i HTML Academy på CoddyKit. Dette er leksjon 1 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i HTML Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i HTML Academy inneholder totalt 4 leksjoner.
Hva IntersectionObserver gjør
IntersectionObserver utløser tilbakekall når et element kommer inn i eller forlater visningsområdet (eller en annen rullebeholder). Det er det moderne og ytelseseffektive alternativet til rullelyttere – nettleseren gjør beregningene, og koden kjører bare ved faktiske endringer i synligheten.
Opprettelse
new IntersectionObserver(callback, options) oppretter en observerer. Tilbakekallet mottar en tabell med oppføringer når skjæringsforholdene endres. options styrer hvilken beholder som observeres, og ved hvilke terskler dette skjer.
const observer = new IntersectionObserver((entries) => {
for (const entry of entries) {
if (entry.isIntersecting) {
console.log("Visible:", entry.target);
}
}
});
observer.observe(document.querySelector(".hero"));IntersectionObserverEntry
Hver oppføring har target (det observerte elementet), isIntersecting (boolsk verdi), intersectionRatio (fra 0 til 1), boundingClientRect, intersectionRect og time. Bruk isIntersecting til binære synlighetskontroller og intersectionRatio til logikk basert på hvor mange prosent som er synlig.
threshold-alternativet
{ threshold: 0.5 } utløser tilbakekallet hver gang skjæringsforholdet krysser 50 %. Bruk en tabell som [0, 0.25, 0.5, 0.75, 1] for å utløse det ved hver fjerdedel – nyttig når De skal lage fremdriftsindikatorer eller analyser som rapporterer «% synlig».
root-alternativet
Som standard måler observereren skjæringen med visningsområdet. Angi root: someScrollableDiv for å måle mot en indre rullebeholder – for eksempel en virtualisert liste i en div med fast høyde.
rootMargin-alternativet
rootMargin: "200px" utvider observasjonsområdet med 200 piksler på hver side. Bruk det til å utløse tidligere (start innlasting av bilder 200 piksler før de kommer inn i visningsområdet) eller senere (utløs bare når de er helt forbi visningsområdet).
new IntersectionObserver(callback, {
rootMargin: "0px 0px 200px 0px",
threshold: 0
});observe og unobserve
observer.observe(element) begynner å overvåke et element, mens observer.unobserve(element) stanser overvåkingen. Avslutt alltid overvåkingen når De ikke lenger trenger tilbakekallet (for eksempel etter at lat innlasting er utløst én gang), slik at minne frigjøres.
disconnect
observer.disconnect() stanser overvåkingen av alle observerte elementer. Kall metoden når komponenten avmonteres eller observereren ikke lenger trengs – dette hindrer lekkasjer fra observerere som lever lenger enn bruksområdet sitt.
Asynkron levering
Tilbakekall leveres asynkront og samles i grupper – mange endringer i skjæringen under rask rulling utløser ett tilbakekall med alle oppføringene, ikke ett per element. Dette gir en betydelig ytelsesfordel sammenlignet med rullelyttere som utløses ved hver rullehendelse.
Det første tilbakekallet utløses umiddelbart
Når De observerer et nytt element, utløses tilbakekallet én gang nesten umiddelbart med den gjeldende tilstanden. Dette er nyttig for å håndtere elementer som allerede er synlige når observasjonen begynner, uten en egen initialiseringsbane.
Vanlige bruksområder
Lat innlasting av bilder, utløsing av animasjoner når elementer rulles inn i visningen, uendelig rulling (observer et sentinel-element nær slutten av listen), sporing av hvilke artikler brukeren faktisk har lest, og veksling av klebrige topptekster basert på om hero-elementet er synlig.
Kunnskapssjekk
Hva er forskjellen mellom threshold: 0 og threshold: 1 i en IntersectionObserver?
Oppsummering
IntersectionObserver utløser tilbakekall ved endringer i elementers synlighet og har innebygd ytelsesoptimalisering og gruppering. Bruk det i stedet for rullelyttere når De skal implementere synlighetslogikk. Konfigurer med threshold (0 til 1 eller en tabell), root (egendefinert rullebeholder) og rootMargin (utvid eller krymp observasjonsområdet). Bruk observe/unobserve for enkeltelementer, og disconnect for å rydde opp i alt.
Lær deg HTML med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 40
- Leksjoner
- 159
Ofte stilte spørsmål
Er leksjonen «IntersectionObserver API og terskler» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien HTML Academy, inkludert «IntersectionObserver API og terskler», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i HTML Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «IntersectionObserver API og terskler»?
Opprett observatører og konfigurer synlighetsterskler Du øver på HTML Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med HTML Academy?
Ingen tidligere erfaring er nødvendig. HTML Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.
Hvor lang tid tar leksjonen «IntersectionObserver API og terskler»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne HTML Academy-leksjonen?
Ja. Alle HTML Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- IntersectionObserver API og terskler
- Lazy loading med IntersectionObserver
- Implementering av uendelig rulling
- Oppsett av rullekoblede animasjoner