Spaces:
Running
Running
| <script setup lang="ts"> | |
| import { onBeforeUnmount, onMounted, ref } from "vue"; | |
| /** Thin accent line that fills with page scroll — stands in for the (hidden) page scrollbar. */ | |
| const progress = ref(0); | |
| let frame = 0; | |
| function update() { | |
| frame = 0; | |
| const max = document.documentElement.scrollHeight - innerHeight; | |
| progress.value = max > 0 ? Math.min(1, scrollY / max) : 0; | |
| } | |
| const schedule = () => (frame ||= requestAnimationFrame(update)); | |
| let resize: ResizeObserver | undefined; | |
| onMounted(() => { | |
| addEventListener("scroll", schedule, { passive: true }); | |
| // Content height changes as the catalog loads / filters change. | |
| resize = new ResizeObserver(schedule); | |
| resize.observe(document.body); | |
| update(); | |
| }); | |
| onBeforeUnmount(() => { | |
| removeEventListener("scroll", schedule); | |
| resize?.disconnect(); | |
| cancelAnimationFrame(frame); | |
| }); | |
| </script> | |
| <template> | |
| <div class="track" aria-hidden="true"> | |
| <div class="fill" :style="{ transform: `scaleX(${progress})` }" /> | |
| </div> | |
| </template> | |
| <style scoped> | |
| .track { | |
| position: absolute; | |
| left: 0; | |
| right: 0; | |
| bottom: -1px; | |
| height: 1px; | |
| background: var(--line); | |
| pointer-events: none; | |
| } | |
| .fill { | |
| /* tracks the list's scroll, so it spans the list, not the docked panel beside it */ | |
| width: calc(100% - var(--panel)); | |
| height: 2px; | |
| margin-top: -0.5px; | |
| background: var(--accent); | |
| box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 50%, transparent); | |
| transform-origin: left; | |
| will-change: transform; | |
| } | |
| </style> | |