const doc = document.documentElement;
window.addEventListener('scroll', () => {
const max = doc.scrollHeight - doc.clientHeight;
const p = doc.scrollTop / max; // 0 … 1
barra.style.width = (p * 100) + '%';
});
Por qué se siente bien
Responde a una pregunta silenciosa: ¿cuánto falta? Esa pequeña certeza hace que los textos largos se sientan más livianos.
La matemática es trivial — el truco está en elegir bien el contenedor a medir (aquí la página entera; en la galería, una cajita).
Mantenlo suave
Usa un listener de scroll pasivo y anima solo el ancho (o transform: scaleX) para que sea barato en cada fotograma.
Con un degradado sutil se lee como un indicador de progreso de verdad, no solo una línea.
Pruébalo
Sube y baja — la barra sigue exacto. Ese mapeo directo es justamente el punto.
Y llegaste al final. La barra está llena. 🎉