CSS Tip

Calculate the scroll progress of an arbitrary element

The same code of the previous trick can also be used to get the scroll progress of any element on the page. The only difference is the use of self inside the scroll() value.

@property --s {
  syntax: '<integer>';
  inherits: true;
  initial-value: 0; 
}
.scroll {
  animation: scroll 1s linear;
  animation-timeline: scroll(self);
}
@keyframes scroll {
  to {--s: 100}
}

.scroll:before {
  content: "Scroll Progress: " counter(s) "%";
  counter-reset: s var(--s);
}

See the Pen CSS only scroll progress II by Temani Afif (@t_afif) on CodePen.

More CSS Tips