Indicador de posición de desplazamiento delgado con JavaScript puro-Scrollify
| Autor: | Htown29 |
|---|---|
| Views Total: | 2,837 |
| Sitio oficial: | Ir a la web |
| Actualizado: | September 9, 2015 |
| Licencia: | MIT |
Vista prévia
Descripción
Una solución de JavaScript puro para dibujar una barra indicadora delgada que se actualiza automáticamente en función de la posición de desplazamiento.
Funcionamiento
Cree un elemento DIV vacío para el indicador de posición de desplazamiento.
<div class="scroll-line"></div>
El núcleo JavaScript.
/**
* Subtract the height of the HTML document from the viewport height.
* Divide the scroll position by the viewport height and the document height.
* Multiply that by 100 to convert it to a percentage value.
*/
//alert(window.outerHeight);
//alert(document.body.clientHeight);
(function() {
function Scrollify() {
var line = document.querySelector(".scroll-line"),
scrollpos = window.pageYOffset,
docheight = document.body.clientHeight,
winheight = window.outerHeight,
scrolled
= ( scrollpos/( docheight-winheight) )*100;
line.style.width = (scrolled + '%');
}
window.addEventListener("scroll", Scrollify);
})(); Estilo del indicador de posición de desplazamiento.
.scroll-line {
height: 2px;
background: red;
width: 0%;
clear: both;
}
