<div class="scroller">
<div class="number"></div><span></span>
</div>
@property --num {
syntax: "<integer>";
inherits: true;
initial-value: 0;
}
body {
display: grid;
height: 100vh;
place-items: center;
grid-template-columns: auto auto;
gap: 1rem;
}
.scroller {
inline-size: 210px;
padding: 2rem;
aspect-ratio: 1;
border: 10px solid black;
overflow: auto;
container: scroller / inline-size;
scroll-timeline: --scroller block;
> span {
display: block;
height: 2000px;
}
}
.number {
position: sticky;
top: 0;
font-family: system-ui;
font-variation-settings: "wght" 900, "wdth" 700;
font-size: 30cqw;
animation: counter linear both;
animation-timeline: --scroller;
&::after {
counter-set: num var(--num);
content: counter(num);
}
}
@supports not (scroll-timeline: --x) {
.number::after {
font-size: 20px;
color: red;
content: "No support.";
}
}
@keyframes counter {
from {
--num: 0;
}
to {
--num: 100;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.