Calculate the scroll progress of the page 관련

CSS > Article(s)

---

Article(s)

---

Calculate the scroll progress of the page

A few lines of CSS to get the scroll progress of the page inside a CSS variable

Get the scroll progress of the page as a CSS variable using a few lines of code

• Powered by Scroll-Driven animations
• Defined at the :root level (avaiable to all the elements)
• Typed using @property
• You can easily use it within any formula

@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);
}

See CSS only scroll progress by t_afif on CodePen.

More CSS Tips

• Count the number of lines inside a text A CSS-only solution to count the lines of text. July 29, 2024
• Get the width & height of any element without JavaScript Using modern CSS to get the size of any element as CSS variables. July 26, 2024
• Typed CSS variables using @property Upgrade your CSS variables by registring them using the @property. July 17, 2024
• Get the screen width & height without JavaScript A few lines of CSS to get the screen width/height as integer values. July 16, 2024

Calculate the scroll progress of the page

---

A few lines of CSS to get the scroll progress of the page inside a CSS variable