Como implementar a rolagem infinita com JavaScript

O que é Rolagem Infinita?

A rolagem infinita é um recurso usado para carregar dinamicamente mais conteúdo em uma página quando o usuário rola até o final da página.

O conceito de rolagem infinita é usado para carregar dados de um servidor de uma maneira que pareça “sem problemas” para um usuário, mas não sobrecarrega o servidor solicitando muitos dados de uma só vez.

Em um tutorial anterior, implementamos um recurso de paginação o que nos permitiu dividir nosso conteúdo em seções navegáveis ​​conhecidas como páginas. Este tutorial usará uma implementação semelhante.

Benefícios do JavaScript Vanilla

Um benefício significativo de usar JavaScript é que nossa implementação é agnóstica de framework, ou seja, não depende de nenhum framework, então pode ser modificada para funcionar em todos eles.

Além disso, como estamos construindo o recurso nós mesmos e não dependendo de um plugin, podemos garantir que a implementação seja leve e perfeitamente adequada às nossas necessidades.

Aqui está uma olhada no produto final, role até a parte inferior da caneta para carregar mais conteúdo:

1. Marcação com HTML

Começaremos colocando o recipiente para nossos cartões na página. Adicionaremos os cartões ao contêiner usando JavaScript para que o div fique vazio.

Também temos carregador div para exibir uma animação antes de adicionar o próximo lote de cartões e um cartão de ações div para mostrar a contagem de cartas e o total de cartas.

divs de carregador e contagem de cartõesdivs de carregador e contagem de cartõesdivs de carregador e contagem de cartões
Como serão as divs do carregador e da contagem de cartões

2. Estilizando com CSS

Os cartões que adicionaremos ao div do contêiner de cartão terão um nome de classe de ‘card’.

Também criaremos uma animação de carregamento para os cartões de esqueleto na div do carregador, animando o ::after pseudo-seletor:

Estilo acessível

Sempre que incluímos uma animação em uma página da Web, é importante considerar as implicações de acessibilidade. Alguns usuários podem preferir não ter nenhuma animação e podemos levar essa preferência em consideração em nosso estilo usando a regra de mídia, prefers-reduced-motion

3. Funcionalidade com JavaScript

Vamos quebrar a lógica por trás da rolagem infinita.

  1. Defina o limite do conteúdo a ser carregado na página.
  2. Detecte quando o usuário atingiu o final do contêiner de conteúdo.
  3. Carregue mais conteúdo quando o final do contêiner for atingido.
  4. Se não houver mais conteúdo a ser carregado, pare a rolagem infinita.

Definindo Constantes

Primeiro, vamos pegar todos os elementos que precisaremos do nosso DOM:

Agora precisamos definir nossas variáveis ​​globais.

Precisaremos de um valor para o número máximo de cartões a serem adicionados à página. Se você estiver obtendo seus dados de um servidor, esse valor será o comprimento da resposta do servidor. Vamos inicializar um limite de cartão de 99.

o cardTotalElem é o elemento para exibir o número máximo de cartões na página para que possamos definir o innerHTML para o cardLimit valor;

Em seguida, definiremos uma variável para quantos cartões queremos aumentar a página:

Queremos saber quantas “páginas” teremos, ou seja, quantas vezes podemos aumentar o conteúdo até atingirmos o limite máximo. Por exemplo, com nosso definido cardLimit e cardIncrease variáveis, podemos aumentar o conteúdo 10 vezes (assumindo que já carregamos os primeiros 9 elementos) até atingirmos o limite. Faremos isso dividindo o cardLimit pelo cardIncrease.

Em seguida, definiremos um valor para determinar em qual página estamos:

Criando um novo cartão

Agora que temos todas as nossas constantes, vamos fazer uma função para adicionar um novo cartão ao container de cartões. Vamos definir o innerHTML dos nossos cartões ao valor do índice para que possamos acompanhar o número de cartões que estamos adicionando.

Um recurso divertido nesta demonstração é que cada cartão tem uma cor de fundo gerada aleatoriamente.

Adicionando cartões ao contêiner

Agora adicionaremos nossos cartões ao nosso contêiner usando uma funcionalidade semelhante a o tutorial de paginação.

Primeiro, determine o intervalo de cartões a serem adicionados à página. o addCards função aceitará um pageIndex parâmetro, que irá atualizar o global currentPage valor. Se estivermos na página 1, adicionaremos os cartões de 1 a 9. Se estivermos na página 2, adicionaremos os cartões de 10 a 18 e assim por diante.

Podemos definir isso matematicamente como:

Nesta função, nosso intervalo inicial será sempre um a menos do que o valor que estamos tentando obter (ou seja, na página 1, o intervalo inicial é 0, na página 2, o intervalo inicial é 9), portanto, consideraremos isso definindo o valor do nosso índice de loop for para startRange + 1.

Detectando quando o limite do cartão é atingido

Um limite que teremos que observar é o endRange número. Se estivermos na última página, queremos que nosso intervalo final seja o mesmo que o cardLimit. Por exemplo, se tivermos um cardLimit de 75 e um cardIncrease de 10 e estamos na página 8, nosso índice inicial será 70 e nosso endRange valor deve ser 75.

Vamos modificar nosso addCards função para dar conta disso:

Nossa demonstração também inclui um cardTotal elemento que exibe o número de cartões que estão sendo mostrados na página, então definiremos o innerHTML deste elemento como o intervalo final.

Carregando cartões iniciais

Definimos um recurso para adicionar cartões ao contêiner para incluir um window.onload função para definir os cartões iniciais a serem adicionados à página.

Manipulando a rolagem infinita

Vamos lidar com nossa rolagem infinita aumentando o currentPage número para adicionar novos cartões ao contêiner quando chegarmos ao final da página. Podemos detectar quando o final da página é alcançado adicionando o innerHeight da janela para o valor de rolagem pageYOffset e comparando com o documento offsetHeight que é a altura total da página.

Aqui está uma representação visual de como isso se parece:

Quando chegamos ao final da página, queremos carregar uma nova página chamando nosso addCards função com currentPage + 1.

Em seguida, criamos um ouvinte de eventos para a rolagem da janela e passamos nossa função acima para ele:

Otimização de desempenho

Como estamos trabalhando com o ouvinte de eventos de rolagem, é benéfico para o desempenho de nossa página da Web limitar o número de chamadas feitas. Podemos diminuir o número de chamadas usando uma função de aceleração.

Vamos definir nossa função de aceleração desta forma:

e então passamos a função do acelerador para o handleInfiniteScroll função

Parando a rolagem infinita

Neste ponto, configuramos nossas funções para adicionar mais conteúdo quando o final da página for atingido. Agora, vamos garantir que nossa função pare de ser executada quando não houver mais conteúdo a ser adicionado, ou seja, quando o cardLimit é atingido.

Primeiro, vamos definir nosso removeInfiniteScroll função. Nesta função, vamos remover o handleInfiniteScroll função do ouvinte de eventos de rolagem e também exclua o div do carregador.

Agora vamos modificar nosso handleInfiniteScroll para contabilizar se não houver mais conteúdo a ser adicionado, ou seja, estamos na última página de conteúdo.

Conclusão

E aí temos que! Construímos uma implementação acessível e de alto desempenho do recurso de rolagem infinita. Confira o código JavaScript completo clicando no botão JS guia na demonstração incorporada abaixo:

Source link

Amazon Coaching Grátis

Venda 25K Dólares com apenas um Produto no Amazon.

Artigos Relacionados

LEAVE A REPLY

Please enter your comment!
Please enter your name here

16 − nove =

- Ana Pereira -spot_img

Últimos Artigos