Barra di avanzamento lettura
Indica quanto contenuto è stato letto mentre l'utente scorre la pagina.
Quando si usa
Quando una pagina contiene articoli lunghi, guide o lezioni e vuoi mostrare quanto manca alla fine.
Perché si usa
La barra aiuta l'utente a orientarsi nella lettura e rende più chiara la lunghezza del contenuto.
Vantaggi principali
- Indicatore semplice e leggero
- Utile per articoli lunghi
- Non richiede librerie esterne
Anteprima del risultato
La barra colorata rappresenta l'avanzamento della lettura.
Esempio: 62% della pagina letto.
Codice completo
Puoi copiare il frammento e inserirlo in una pagina di prova. Prima della pubblicazione sostituisci i dati dimostrativi con quelli reali.
<div id="barraLettura" class="barra-lettura"></div>
<script>
const barra = document.getElementById('barraLettura');
window.addEventListener('scroll', function(){
const scorrimento = document.documentElement.scrollTop || document.body.scrollTop;
const altezza = document.documentElement.scrollHeight - document.documentElement.clientHeight;
const percentuale = altezza > 0 ? (scorrimento / altezza) * 100 : 0;
barra.style.width = percentuale + '%';
});
</script>
<style>
.barra-lettura{position:fixed;top:0;left:0;height:4px;width:0;background:#2463a9;z-index:9999}
</style>Da personalizzare: Altezza, colore, posizione e soglie di visualizzazione.
Errore da evitare: Non sovrapporre la barra a menu fissi o elementi importanti senza verificare lo z-index.