IntersectionObserver API e soglie

IntersectionObserver esegue i callback quando un elemento entra o esce dal viewport (o da un altro contenitore con scorrimento). È l'alternativa moderna e performante ai listener dello scorrimento: è il browser a eseguire i calcoli e il codice viene eseguito solo in caso di effettivi cambiamenti di visibilità.

new IntersectionObserver(callback, options) crea un observer. Il callback riceve un array di entry quando cambiano le intersezioni; le opzioni controllano quale contenitore osservare e a quali soglie.

Ogni entry contiene target (l'elemento osservato), isIntersecting (booleano), intersectionRatio (da 0 a 1), boundingClientRect, intersectionRect e time. Utilizzi isIntersecting per i controlli di visibilità binari e intersectionRatio per la logica basata sulla percentuale visibile.

{ threshold: 0.5 } esegue il callback ogni volta che il rapporto di intersezione supera il 50%. Utilizzi un array [0, 0.25, 0.5, 0.75, 1] per eseguirlo a ogni quarto, utile per creare indicatori di avanzamento o analisi che riportano la percentuale visibile.

Per impostazione predefinita, l'observer misura l'intersezione con il viewport. Imposti root: someScrollableDiv per effettuare la misurazione rispetto a un contenitore interno con scorrimento, ad esempio una lista virtualizzata all'interno di un div con altezza fissa.

rootMargin: "200px" amplia di 200 pixel per lato l'area osservata. Lo utilizzi per eseguire il callback in anticipo (iniziando a caricare le immagini 200 px prima che entrino nel viewport) o in ritardo (eseguendolo solo quando sono completamente oltre il viewport).

observer.observe(element) inizia a osservare un elemento; observer.unobserve(element) interrompe l'osservazione. Esegua sempre unobserve quando il callback non è più necessario (ad esempio dopo che il caricamento differito è stato attivato una volta), per liberare memoria.

observer.disconnect() interrompe l'osservazione di tutti gli elementi osservati. Lo chiami quando il componente viene smontato o quando l'observer non è più necessario, per evitare perdite di memoria dovute a observer che continuano a vivere oltre il loro caso d'uso.

I callback vengono eseguiti in modo asincrono e raggruppato: molte variazioni delle intersezioni durante uno scorrimento rapido attivano un solo callback con tutte le entry, non un callback per elemento. Si tratta di un importante vantaggio in termini di prestazioni rispetto ai listener dello scorrimento, che vengono eseguiti a ogni evento di scorrimento.

Quando osserva un nuovo elemento, il callback viene eseguito quasi immediatamente una volta, con lo stato corrente. Questo è utile per gestire gli elementi già visibili all'inizio dell'osservazione, senza dover creare un percorso di inizializzazione separato.

Caricamento differito delle immagini, attivazione di animazioni quando gli elementi entrano nel viewport, scorrimento infinito (osservando un sentinel vicino alla fine della lista), tracciamento degli articoli che l'utente ha effettivamente letto, attivazione o disattivazione di un'intestazione fissa in base alla visibilità dell'hero.

Qual è la differenza tra threshold: 0 e threshold: 1 in un IntersectionObserver?

IntersectionObserver esegue callback quando cambia la visibilità di un elemento, offrendo prestazioni elevate e raggruppamento integrati: lo utilizzi al posto dei listener dello scorrimento per la logica basata sulla visibilità. Lo configuri con threshold (da 0 a 1 oppure un array), root (un contenitore personalizzato con scorrimento) e rootMargin (per ampliare o ridurre l'area osservata). Utilizzi observe/unobserve per i singoli elementi e disconnect per eseguire la pulizia completa.