Spaces:
Running
Running
File size: 1,464 Bytes
830f2f5 45fb44a 830f2f5 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | <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>
|