JavaScript Academy · Lezione

Osservare la visibilità degli elementi

Crei un observer e monitori gli elementi.

Osservare la visibilità degli elementi è una lezione JavaScript Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento JavaScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso JavaScript Academy include 4 lezioni in totale.

Perché utilizzare Intersection Observer

Tradizionalmente, rilevare quando un elemento entra nell'area visibile significava mettersi in ascolto di scroll e chiamare continuamente getBoundingClientRect, con prestazioni lente e poco fluide.

Intersection Observer API monitora la visibilità in modo efficiente e asincrono, al di fuori del thread principale.

Creare un observer

Crei un observer con new IntersectionObserver(callback). Il callback viene eseguito ogni volta che la visibilità di un elemento osservato attraversa una soglia.

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

Osservare un elemento

Chiami observer.observe(element) per iniziare a monitorare un obiettivo. Un solo observer può monitorare molti elementi.

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

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

Il flag isIntersecting

Ogni entry contiene un valore booleano isIntersecting che indica se l'obiettivo si sovrappone attualmente alla root, che per impostazione predefinita è l'area visibile.

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

Dettagli dell'entry

Ogni IntersectionObserverEntry contiene dati utili:

target — l'elemento osservato
isIntersecting — indica se attraversa la root
intersectionRatio — la porzione visibile, da 0 a 1
boundingClientRect — il rettangolo dell'obiettivo

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

L'opzione threshold

L'opzione threshold controlla a quali rapporti di visibilità viene eseguito il callback. Con 0 viene eseguito non appena è visibile un solo pixel; con 1 viene eseguito solo quando l'elemento è completamente visibile.

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]

L'opzione root

Per impostazione predefinita, l'observer effettua la misurazione rispetto alla viewport del browser. Imposti root su un elemento antenato con scorrimento per misurare invece la visibilità all'interno di quel contenitore.

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

L'opzione rootMargin

rootMargin espande o riduce il riquadro di delimitazione di root, come fanno i margini CSS. I valori positivi attivano il callback prima, cioè prima che l'elemento sia effettivamente visualizzato.

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

Interrompere l'osservazione

Chiami observer.unobserve(element) per smettere di osservare un elemento oppure observer.disconnect() per smettere di osservarli tutti. Questo è importante per la pulizia delle risorse e per le attivazioni una tantum.

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

Perché è efficiente

Il browser calcola internamente le intersezioni e raggruppa le notifiche, invece di eseguire il codice JavaScript a ogni frame dello scorrimento. In questo modo evita il layout thrashing e mantiene fluido lo scorrimento anche con molti target.

Casi d'uso comuni

Intersection Observer è alla base di molte funzionalità reali:

Lazy loading di immagini e iframe
Scorrimento infinito
Animazioni attivate dallo scorrimento
Monitoraggio delle impressioni di annunci o contenuti

Ora ne realizzeremo alcune.

Verifica rapida

Verifichi la Sua comprensione delle nozioni di base di Intersection Observer.

Riepilogo

Ha appreso le nozioni di base di Intersection Observer:

new IntersectionObserver(callback, options) ne crea uno.
observe avvia l'osservazione; unobserve/disconnect la interrompono.
Ogni voce espone isIntersecting e intersectionRatio.
threshold, root e rootMargin regolano quando viene eseguito.
È molto più efficiente dei listener dello scorrimento.

Ora useremo questo strumento per il lazy loading delle immagini.

Domande Frequenti

La lezione «Osservare la visibilità degli elementi» è gratuita?

Sì — il testo completo di «Osservare la visibilità degli elementi» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso JavaScript Academy, passa a CoddyKit PRO. Il corso JavaScript Academy include 4 lezioni in totale.

Cosa imparerò in «Osservare la visibilità degli elementi»?

Crei un observer e monitori gli elementi. Eserciti JavaScript Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare JavaScript Academy?

Non è richiesta alcuna esperienza precedente. JavaScript Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.

Quanto tempo richiede la lezione «Osservare la visibilità degli elementi»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione JavaScript Academy?

Sì. Ogni lezione JavaScript Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a JavaScript Academy