Come scorrere infinito in javascript?

Durante la progettazione di una pagina Web, l'attenzione di un utente conta molto. Oltre a ciò, creare una migliore esperienza di visualizzazione della pagina web rispetto alla paginazione. Nell'altro caso, rendere la pagina compatibile anche con i dispositivi mobili che sono disponibili per gli utenti "24/7". In tali scenari di caso, l'implementazione di Infinite Scroll in JavaScript è una grande funzionalità che consente all'utente di interagire con "contenuto"Convenientemente.

Questo blog spiegherà l'approccio per implementare Infinite Scroll in JavaScript.

Come implementare Infinite Scroll in JavaScript?

L'infinito scroll in JavaScript può essere implementato utilizzando i seguenti approcci:

• "addEventListener ()" E "appendChild ()"Metodi.
• "onscrollEvento "e"scrolly" proprietà.

Approccio 1: scorrere infinitamente JavaScript utilizzando i metodi AddeventListener () e AppendChild ()

IL "addEventListener ()"Il metodo viene utilizzato per allegare un evento all'elemento specificato. IL "appendChild ()"Il metodo aggiunge un nodo all'ultimo figlio dell'elemento. Questi metodi possono essere applicati per allegare un evento all'elenco e aggiungere gli elementi dell'elenco come ultimo figlio in esso.

Sintassi

elemento.addEventListener (evento, ascoltatore, uso);

Nella sintassi data:

• "evento"Si riferisce all'evento specificato.
• "ascoltatore"Punta alla funzione che verrà invocata.
• "utilizzo"È il valore opzionale.

elemento.AppendChild (nodo)

Nella sintassi sopra:

• "nodo"Si riferisce al nodo da aggiungere.

Esempio
Seguiamo l'esempio di seguito:

Elenco di scorrimento infinito

Nel codice sopra, eseguire i seguenti passaggi:

• Includere l'intestazione dichiarata.
• Inoltre, alloca il "id" di nome "scorrere"Alla lista non ordinata.

Passiamo alla parte JavaScript del codice:

Nello snippet di codice JS sopra:

• Accedi al "elenco"Specificato prima dal suo"id" usando il "documento.QuerySelector ()" metodo.
• Nel passaggio successivo, inizializza la variabile "aggiungere" con "1".
• Inoltre, dichiara una funzione in linea chiamata "scroll infinito()". Nella sua definizione, iterare un "per"Loop tale che"20"Gli articoli sono contenuti in un elenco.
• Successivamente, crea un nodo elemento chiamato "li"E incrementarlo da"1"Fare riferimento alla variabile inizializzata"aggiungere"In tale che sia aggiunto al creato"elenco"Da bambino che usa il"appendChild ()" metodo.
• Nell'ulteriore codice, allega un evento chiamato "scorrere". All'evento attivato, la funzione dichiarata verrà invocata.
• Infine, nella definizione della funzione, applicare le funzionalità per rilevare l'elenco quando viene scorciato verso il basso.

Per lo styling dell'elenco, eseguire i seguenti passaggi:

Nelle righe sopra, modella l'elenco e regola le sue dimensioni.

Produzione

Dall'output di cui sopra, si può osservare che gli elementi stanno aumentando in modo infinito, così come lo scorrimento.

Approccio 2: scorrere infinitamente JavaScript utilizzando l'evento OnScroll con la proprietà Scroly

IL "onscroll"L'evento si innesca quando la barra di scorrimento di un elemento viene scorrere. IL "scrolly"La proprietà calcola e restituisce i pixel che vengono consumati per scorrere un documento dall'angolo in alto a sinistra della finestra. Questi approcci possono essere utilizzati per collegare un evento all'elemento corporeo e scorrere applicando una condizione ai pixel verticali.

Sintassi

oggetto.onscroll = function () code;

Nella sintassi sopra:

• "oggetto"Si riferisce all'elemento da scorrere.

Esempio
Seguiamo i passaggi indicati seguenti:

Questo è il sito web Linuxhint

Nel frammento di codice sopra:

• Includere l'intestazione dichiarata.
• Inoltre, specifica un'immagine da visualizzare sul modello Object Document (DOM).

Continuiamo alla parte JavaScript del codice:

Nelle righe del codice sopra, eseguire i seguenti passaggi:

• Accedi al "corpo"Elemento in cui l'intestazione e l'immagine dichiarati sono contenuti usando il"documento.QuerySelector ()" metodo.
• Dopodiché, attacca un "onscroll"Evento ad esso. All'evento attivato, la funzione dichiarata verrà invocata.
• Nella definizione della funzione, ogni volta che l'utente scorre verso il basso, il numero di pixel verrà controllato.
• Se i pixel diventano maggiori dell'altezza del corpo e della finestra, aggiungono "200px"All'altezza attuale del corpo per scorrerlo all'infinito.

Produzione

Nell'output di cui sopra, è evidente che la pergamena è implementata infinitamente sul DOM.

Conclusione

La combinazione del "addEventListener ()" E "appendChild ()"Metodi o i combinati"onscrollEvento "e"scrolly"La proprietà può essere utilizzata per implementare Infinite Scroll in JavaScript. Il primo approccio può essere utilizzato per associare un evento e aggiungere l'elenco degli articoli come bambino Non appena l'elenco viene scorretto verso il basso. Quest'ultimo approccio può essere applicato per allegare un evento al "corpo"Elemento e scorrimento controllando i pixel verticali e aggiungendo anche alcuni pixel per scorrere infinitamente. Questo tutorial spiega come scorrere infinitamente JavaScript.