Scroll Progress Bar

<!-- Progress is scoped to this scroll container, not the window. -->
<div class="relative overflow-hidden rounded-xl border border-gray-200 dark:border-gray-800">
  <div
    class="h-1 w-full bg-gray-200 dark:bg-gray-800"
    role="progressbar"
    aria-label="Reading progress"
    aria-valuemin="0"
    aria-valuemax="100"
    aria-valuenow="0"
    data-progress-track
  >
    <div
      class="h-full w-0 bg-blue-600 transition-[width] duration-150 ease-out motion-reduce:transition-none dark:bg-blue-500"
      data-progress-fill
    ></div>
  </div>
  <div class="max-h-72 overflow-y-auto px-4 py-3" data-progress-scroll>
    <!-- Long content goes here; the bar fills as it is scrolled. -->
  </div>
</div>

<script>
  (function () {
    var scroller = document.querySelector('[data-progress-scroll]');
    var fill = document.querySelector('[data-progress-fill]');
    var track = document.querySelector('[data-progress-track]');
    if (!scroller || !fill || !track) return;
    function update() {
      var max = scroller.scrollHeight - scroller.clientHeight;
      var p = max > 0 ? Math.min(scroller.scrollTop / max, 1) : 0;
      fill.style.width = p * 100 + '%';
      track.setAttribute('aria-valuenow', String(Math.round(p * 100)));
    }
    update();
    scroller.addEventListener('scroll', update, { passive: true });
    window.addEventListener('resize', update);
  })();
</script>