CSS scroll-driven animations não precisam de JavaScript
O Chrome 115+ suporta animation-timeline: scroll() nativamente. Com isso, uma barra de progresso de leitura fica assim:
@keyframes progress {
from { width: 0%; }
to { width: 100%; }
}
.reading-bar {
position: fixed;
top: 0; left: 0;
height: 3px;
background: currentColor;
animation: progress linear;
animation-timeline: scroll(root);
}
Zero JavaScript. O browser sincroniza a animação com o scroll do documento. Firefox ainda não suporta, então vale manter um fallback via JS para compatibilidade.