Spaces:
Sleeping
Sleeping
File size: 1,165 Bytes
b4cec68 3404aeb b4cec68 | 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 | <template>
<div class="scroll-progress">
<div class="progress-bar" :style="{ width: `${scrollProgress}%` }"></div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
// 定义组件名称
defineOptions({
name: 'ScrollProgress'
})
const scrollProgress = ref(0)
const updateScrollProgress = () => {
const scrollTop = window.pageYOffset || document.documentElement.scrollTop
const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight
const progress = (scrollTop / scrollHeight) * 100
scrollProgress.value = Math.min(100, Math.max(0, progress))
}
onMounted(() => {
window.addEventListener('scroll', updateScrollProgress)
updateScrollProgress()
})
onUnmounted(() => {
window.removeEventListener('scroll', updateScrollProgress)
})
</script>
<style scoped>
.scroll-progress {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: rgba(0, 0, 0, 0.1);
z-index: 9999;
}
.progress-bar {
height: 100%;
background: var(--ramex-accent);
transition: width 0.1s ease;
box-shadow: 0 0 10px rgba(102, 126, 234, 0.5);
}
</style>
|