Implementando uma barra indicadora de rolagem com HTML, CSS e JavaScript

Ao construir páginas web mais longas, pode ser útil adicionar um indicador visual para mostrar aos usuários o progresso da rolagem dessa página. Neste post, vamos mostrar como criar uma barra indicadora de rolagem que se preenche à medida que o usuário rola a página para baixo.

Estrutura HTML

Vamos precisar de três elementos principais em nosso HTML:

<div class="scroll-indicator">
     <div class="progress-bar"></div>
</div>

<div class="long-content">
     <!-- Conteúdo da página aqui -->
</div>

O .scroll-indicator é uma <div> vazia que será estilizada para criar a barra indicadora. O .progress-bar será a <div> que irá aumentar conforme o usuário rola a página para baixo.

O container .long-content contém todo o conteúdo da página e precisa ter uma altura definida que cria uma área rolável.

Estilos CSS

Aqui estão os CSS para posicionar e dimensionar a barra indicadora:

.scroll-indicator {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 20px;
   background: #ccc;
   z-index: 999;
}
.progress-bar {
   height: 100%;
   width: 0%;
   background: red;
}

.long-content {
   height: 1000px;
   widht: 100%;
   background-color: blue;
   margin: 0;
}

As propriedades principais são:

position: fixed para manter o indicador fixo na página
top: 0 e left: 0 para grudá-lo ao canto superior esquerdo
width: 0% começa com largura 0
height: 5px dá a ele uma altura visível (no exemplo prático eu coloquei 20px para ficar viśivel)
background: #333 colora a barra
z-index alto mantém na parte superior dos outros elementos

Lógica JavaScript

Vamos usar o JavaScript para calcular e atualizar a largura da barra indicadora na rolagem:

// Obtem elemento do indicador de rolagem
const scrollIndicator = document.querySelector('.scroll-indicator');

// Obtem altura total do conteúdo longo
const totalHeight = document.querySelector('.long-content').clientHeight;

// Atualiza largura na rolagem
window.addEventListener('scroll', () => {

    // Calcula percentuais
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
    var scrolled = (scrollTop / height) * 100;

    // Atualiza largura do indicador
    document.querySelector('.progress-bar').style.width = scrolled + "%";
});

Isso calcula qual porcentagem da altura da página que foi rolada e define a largura do indicador para corresponder.

E isso é tudo! O indicador agora se preencherá à medida que o usuário rolar pela página longa.

Link do codepen