Indicador de progreso de desplazamiento minimalista en JavaScript puro-pageScrollIndicator. js
| Autor: | gregorlaan |
|---|---|
| Views Total: | 966 |
| Sitio oficial: | Ir a la web |
| Actualizado: | June 11, 2018 |
| Licencia: | MIT |
Vista prévia
Descripción
Un indicador de desplazamiento de página minimalista para visualizar el posición de desplazamiento (cuánto ha desplazado el usuario) en una barra de progreso delgado. Totalmente personalizable a través de CSS.
Funcionamiento
Cree el HTML para el indicador de progreso de desplazamiento de página.
<div class="page-scroll-indicator"> <div class="progress"></div> </div>
La función principal para detectar la posición de desplazamiento & porcentaje actual de desplazamiento con respecto a toda la página.
function scrollProgress() {
var currentState = document.body.scrollTop || document.documentElement.scrollTop;
var pageHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrollStatePercentage = (currentState / pageHeight) * 100;
document.querySelector(".page-scroll-indicator > .progress").style.width = scrollStatePercentage + "%";
} Ejecute la función scrollProgress en el desplazamiento de la ventana.
window.onscroll = function () { scrollProgress() }; Estilo del indicador de progreso de desplazamiento de página en el CSS.
.page-scroll-indicator {
width: 100%;
height: 5px;
background: white;
}
.progress {
width: 0%;
height: 5px;
background: #007bff;
}
