Como Rolagem Infinita em JavaScript?

Ao projetar uma página da web, a atenção de um usuário importa muito. Além disso, criando uma melhor experiência de visualização da página da web em comparação com a paginação. No outro caso, tornar a página compatível com dispositivos móveis também que estão disponíveis para os usuários "24/7”. Nesses cenários, a implementação de rolagem infinita em JavaScript é uma ótima funcionalidade, permitindo que o usuário se envolva com “contenteConvenientemente.

Este blog explicará a abordagem para implementar o Roll Infinite em JavaScript.

Como implementar o Roll Infinite Scroll em JavaScript?

O rolo infinito em JavaScript pode ser implementado usando as seguintes abordagens:

• ““addEventListener ()" e "ApndendChild ()" métodos.
• ““OnScrollEvento e “Scrolly" propriedade.

Abordagem 1: Role infinitamente no JavaScript usando os métodos addEventListener () e appendChild ()

O "addEventListener ()”O método é usado para anexar um evento ao elemento especificado. O "ApndendChild ()”Método anexa um nó ao último filho do elemento. Esses métodos podem ser aplicados para anexar um evento à lista e anexar os itens da lista como a última criança.

Sintaxe

elemento.addEventListener (evento, ouvinte, uso);

Na sintaxe dada:

• ““evento”Refere -se ao evento especificado.
• ““ouvinte”Aponta para a função que será invocada.
• ““usar”É o valor opcional.

elemento.AppendChild (nó)

Na sintaxe acima:

• ““nó”Refere -se ao nó a ser anexado.

Exemplo
Vamos seguir o exemplo abaixo do momento:

Lista de rolagem infinitamente

No código acima, execute as seguintes etapas:

• Inclua o cabeçalho declarado.
• Além disso, aloque o “eu ia"Chamado"rolagem”Para a lista não ordenada.

Vamos para a parte JavaScript do código:

No snippet de código JS acima:

• Acesse o "lista”Especificado anteriormente por seu“eu ia”Usando o“documento.QuerySelector ()”Método.
• Na próxima etapa, inicialize a variável “adicionar" com "1”.
• Além disso, declare uma função embutida chamada “Rolagem infinita()”. Em sua definição, itera um “para”Loop de tal forma que“20”Os itens estão contidos em uma lista.
• Depois disso, crie um nó de elemento chamado “li”E aumentá -lo por“1”Referindo -se à variável inicializada“adicionar"De modo que seja anexado ao criado"lista"Quando criança, usando o"ApndendChild ()”Método.
• No código adicional, anexe um evento chamado “rolagem”. Após o evento acionado, a função declarada será invocada.
• Por fim, na definição da função, aplique as funcionalidades para detectar a lista quando ela for rolada para o fundo.

Para estilizar a lista, execute as seguintes etapas:

Nas linhas acima, estilize a lista e ajuste suas dimensões.

Saída

A partir da saída acima, pode -se observar que os itens estão incrementando de maneira infinita e o rolagem também é.

Abordagem 2: Role infinitamente em JavaScript usando o evento OnScroll com a propriedade Scrolly

O "OnScroll”O evento aciona quando a barra de rolagem de um elemento está sendo rolada. O "Scrolly”A propriedade calcula e retorna os pixels que são consumidos em rolar um documento do canto superior esquerdo da janela. Essas abordagens podem ser utilizadas para anexar um evento ao elemento corporal e rolar aplicando uma condição aos pixels verticais.

Sintaxe

objeto.onScroll = function () code;

Na sintaxe acima:

• ““objeto”Refere -se ao elemento a ser rolado.

Exemplo
Vamos seguir as etapas declaradas abaixo:

Este é o site Linuxhint

No trecho de código acima:

• Inclua o cabeçalho declarado.
• Além disso, especifique uma imagem a ser exibida no Modelo de Objeto do Documento (DOM).

Vamos continuar até a parte JavaScript do Código:

Nas linhas de código acima, execute as seguintes etapas:

• Acesse o "corpo”Elemento no qual o cabeçalho e a imagem declarados estão contidos usando o“documento.QuerySelector ()”Método.
• Depois disso, anexe um “OnScroll”Evento para isso. Após o evento acionado, a função declarada será invocada.
• Na definição da função, cada vez que o usuário rola para baixo, o número de pixels será verificado.
• Se os pixels se tornarem maiores que a altura do corpo e da janela, anexe “200px”Para a altura atual do corpo para rolá -la infinitamente.

Saída

Na saída acima, é evidente que o pergaminho é implementado infinitamente no DOM.

Conclusão

A combinação do “addEventListener ()" e "ApndendChild ()”Métodos ou os combinados“OnScrollEvento e “Scrolly”. A abordagem anterior pode ser utilizada para associar um evento e anexar a lista de itens como um criança Assim que a lista é rolada para o fundo. A última abordagem pode ser aplicada para anexar um evento ao “corpo”Elemento e role verificando os pixels verticais e anexando alguns pixels também para rolar infinitamente. Este tutorial explica como rolar infinitamente em JavaScript.