Scroll progress bar

<div class="reader" id="frame">
  <div class="bar"></div>
  <article>
    <p class="hint">Scroll inside this box ↓</p>
    <p>Line one of a long article.</p>
    <p>Keep going…</p>
    <p>Halfway there.</p>
    <p>Almost.</p>
    <p>A little more.</p>
    <p>Nearly done.</p>
    <p>The end. ✓</p>
  </article>
</div>

/* The scrolling box. `scroll-timeline` names its scroll position "--reading". */
.reader {
  position: relative;
  width: min(420px, 100%);
  height: 220px;
  overflow-y: auto;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  scroll-timeline: --reading block;
}

/* The bar starts at zero width (scaleX(0)) and grows to full width. */
.bar {
  position: sticky;
  top: 0;
  height: 4px;
  background: var(--brand);
  transform-origin: left;
  transform: scaleX(0);
}

/* Where supported, the browser ties the animation to scrolling. No JavaScript needed. */
@supports (animation-timeline: scroll()) {
  .bar {
    animation: fillBar linear both;
    animation-timeline: --reading;
  }
}
@keyframes fillBar { to { transform: scaleX(1); } }

article { padding: 8px 22px 22px; }
article p { margin: 0 0 44px; color: var(--muted); }
.hint { color: var(--fg) !important; font-weight: 600; }

// Fallback for browsers without scroll-driven animations.
// Modern browsers skip this entirely and let CSS do the work.

if (!CSS.supports('animation-timeline: scroll()')) {
  const reader = document.getElementById('frame');
  const bar = reader.querySelector('.bar');

  reader.addEventListener('scroll', () => {
    const scrollableDistance = reader.scrollHeight - reader.clientHeight;
    const progress = reader.scrollTop / scrollableDistance; // 0 at the top, 1 at the bottom
    bar.style.transform = `scaleX(${progress})`;
  }, { passive: true });
}