Costruendo SPA, a volte ci imbattiamo nella necessità di visualizzare i dati usando la tecnica dello scorrimento infinito, cioè caricando continuamente i dati mentre l’utente scorre lungo la pagina.

Da quando l’API Intersection Observer è stata aggiunta ai browser, creare un componente di scorrimento infinito riutilizzabile non è mai stato così facile. Impariamo come possiamo creare un tale componente utilizzando questa API.

Nota che non ci immergeremo nell’API Intersection Observer, quindi se non hai familiarità con esso, ti consiglio di leggere questo articolo in anticipo.

Il concetto principale è quello di posizionare un elemento osservabile alla fine di un elenco di elementi visualizzati, al fine di aggiungere più dati quando l’utente raggiunge il fondo di tale elenco.

Vogliamo renderlo il più flessibile possibile, quindi lasciamo che i nostri consumatori passino qualsiasi modello che vogliono usandong-content. Sotto di esso, aggiungiamo un elemento di ancoraggio che servirà come elemento di destinazione che guardiamo.

Creiamo l’Intersection Observer:

Per prima cosa, creiamo un nuovoIntersectionObserver che riceveentries come argomento. Questa funzione verrà chiamata ogni volta che l’elemento osservato entra nella finestra.

Possiamo controllare lo stato di visibilità dell’elemento guardando la proprietà isIntersection. Se isIntersecting è true, l’elemento di destinazione è diventato visibile almeno quanto la soglia superata. La soglia predefinita è 0, il che significa che non appena anche un pixel è visibile, verrà eseguito il callback.

Successivamente, chiamiamo il metodoobserve(), passandogli l’elemento di ancoraggio. Questo avvierà l’osservazione di questo elemento.

Support Support Scrollable Containers

La proprietàroot indica l’elemento utilizzato come viewport per verificare la visibilità del target. Quando è impostato su null il valore predefinito è la finestra del browser.

Ci sono momenti in cui avremo bisogno di avere un contenitore scorrevole, e quindi vorremmo che quel contenitore agisse come elementoroot. Supportiamo questa funzionalità:

Aggiungiamo un controllo per vedere se l’elemento host corrente è un contenitore scorrevole. Se lo è, lo impostiamo come elementoroot.

Infine, non vogliamo perdite di memoria nella nostra applicazione, quindi disconnetteremo l’osservatore quando il componente viene distrutto:

È così semplice.

Vediamo come lo usiamo:

O con un contenitore scorrevole:

Supporto browser

L’API Intersection Observer funziona nella maggior parte dei principali browser. Se è necessario supportare vecchi browser come IE, è possibile caricare un polyfill o un fallback nell’evento scroll in runtime.

Ak Hai già provato Akita?

Una delle principali librerie di gestione dello stato, Akita è stata utilizzata in innumerevoli ambienti di produzione. È in costante sviluppo e miglioramento.

Che si tratti di entità che arrivano dal server o dai dati di stato dell’interfaccia utente, Akita dispone di negozi personalizzati, strumenti potenti e plugin su misura, che consentono di gestire i dati e annullare la necessità di enormi quantità di codice boilerplate. Noi / consiglio vivamente di provarlo.

Seguimi su Medium o Twitter per saperne di più su Angular, Akita e JS!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.