IntersectionObserver per effetti attivati dallo scorrimento

L'API IntersectionObserver monitora in modo efficiente se uno o più elementi entrano o escono dall'area visibile del browser (oppure da un elemento antenato specificato). A differenza dei listener di scroll, che vengono attivati a ogni pixel, l'observer chiama il callback solo quando l'elemento attraversa una soglia, offrendo prestazioni molto migliori per gli effetti basati sullo scorrimento.

Il callback riceve un array di oggetti IntersectionObserverEntry, uno per ogni elemento monitorato. Ogni voce contiene un booleano isIntersecting (true quando l'elemento è visibile) e un numero intersectionRatio compreso tra 0 e 1 (la frazione dell'elemento attualmente visibile). Utilizzi questi valori per determinare lo stato di visibilità.

Crei l'observer all'interno di un useEffect e chiami observer.observe(ref.current) per iniziare a monitorare l'elemento. Il ref deve essere associato all'elemento DOM che desidera monitorare. Crei l'observer dopo il montaggio del componente, in modo che ref.current sia valorizzato.

Nella funzione di pulizia di useEffect, chiami observer.unobserve(element) per smettere di monitorare un elemento specifico oppure observer.disconnect() per interrompere tutti i monitoraggi. Dimenticare la pulizia fa sì che l'observer rimanga attivo dopo lo smontaggio del componente, causando potenzialmente errori o perdite di memoria.

L'opzione threshold controlla quando viene chiamato il callback. Il valore 0 lo attiva non appena un qualsiasi pixel dell'elemento è visibile. Il valore 1 lo attiva solo quando l'elemento è completamente visibile. Può anche passare un array come [0, 0.5, 1] per ricevere callback a più livelli di visibilità.

rootMargin estende o riduce l'area effettiva di intersezione usando una sintassi simile a quella CSS: '100px 0px' attiva il callback 100px prima che l'elemento entri nell'area visibile. Utilizzi '-100px' per attivarlo solo quando l'elemento si trova 100px all'interno dell'area visibile. È utile per precaricare contenuti o avviare un'animazione prima che l'elemento sia completamente visibile.

Per caricare le immagini in modo differito, inizialmente imposti un attributo data-src invece di src. Quando l'observer si attiva con isIntersecting: true, copi data-src in src per avviare la richiesta di rete. Quindi chiami observer.unobserve(entry.target), poiché l'immagine deve essere caricata una sola volta.

Per le animazioni di dissolvenza in entrata, aggiunga una classe CSS quando isIntersecting diventa true: element.classList.add('visible'). Definisca la transizione in CSS: .card { opacity: 0; transform: translateY(20px); transition: opacity 0.4s, transform 0.4s; } e .card.visible { opacity: 1; transform: none; }. L'observer attiva il trigger in modo efficiente.

IntersectionObserver è ideale per monitorare le visualizzazioni. Quando un elemento con un attributo data-analytics-id diventa intersecante con una soglia pari a 0.5, generi un evento di analisi. In questo modo misurerà con precisione quali sezioni dei contenuti gli utenti leggono effettivamente, con un'affidabilità molto maggiore rispetto alla semplice percentuale di scorrimento.

Una singola istanza di IntersectionObserver può osservare più elementi chiamando observer.observe(element) per ciascuno di essi. Tutti gli elementi osservati condividono la stessa callback e le stesse opzioni. Utilizzi entry.target all'interno della callback per identificare l'elemento che ha attivato la notifica.

Un hook useInView riutilizzabile restituisce [ref, inView]. Colleghi ref a qualsiasi elemento e legga inView per sapere se è attualmente visibile. L'hook accetta un oggetto options per impostare threshold e rootMargin. Questa astrazione rende dichiarativi gli effetti legati allo scorrimento in qualsiasi componente.

Che cosa significa una soglia di IntersectionObserver pari a 0?

IntersectionObserver monitora in modo efficiente la visibilità degli elementi utilizzando isIntersecting e intersectionRatio. Esegua sempre la pulizia con unobserve o disconnect. Utilizzi threshold per controllare il punto di attivazione e rootMargin per estendere la zona di rilevamento. Lo utilizzi per il caricamento differito, le animazioni e il monitoraggio analitico.