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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.