🗒 Вычисление прогресса прокрутки страницы

Получение прогресса прокрутки страницы в виде переменной CSS с помощью нескольких строк кода

- Работает на основе анимации, управляемой прокруткой
- Определяется на уровне :root (доступно для всех элементов)
- Типизируется с помощью @property
- Можно легко использовать в любой формуле

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

element:before {
  content: counter(s) "%";
  counter-reset: s var(--s);
}

Пример на CodePen


#css