Los controladores de desplazamiento de JavaScript se ejecutan en el hilo principal y pasan su vida estrangulados. Las animaciones CSS basadas en desplazamiento se ejecutan en el compositor: el progreso de la animación ES la posición de desplazamiento, por lo que una barra de lectura cuesta dos propiedades y cero oyentes.

.reading-bar {
  position: fixed; inset: 0 0 auto 0; height: 3px; background: var(--brand);
  transform-origin: 0 50%; transform: scaleX(0);
  animation: reading linear;
  animation-timeline: scroll(root block);
}
@keyframes reading { to { transform: scaleX(1); } }

Donde cabe, donde no

  • Texto del artículo que se desplaza en un documento: ajuste perfecto, la barra refleja exactamente lo que ve el lector.
  • Paneles de control de varias columnas o contenedores de desplazamiento dentro de las páginas: limite la línea de tiempo al contenedor, no a la raíz, o se ubicará.
  • El soporte es la era Chromium-and-Safari; Los navegadores sin él no tienen barreras. Una página sin una barra no pierde nada.

Toma el color de la marca y el movimiento de nada más. Una barra que rastrea el desplazamiento silenciosamente es una característica; una barra que aparece y desaparece a 60 Hz es una demostración. El LCP medido de este sitio permaneció idéntico después de no agregar nada en absoluto, que es la solicitud de función honesta detrás de la mayoría de las barras de progreso.