顶部滚动条

背景

来给自己的Teek博客增加一个顶部滚动条功能。😊

版权

警告

本着开源共享、共同学习的精神：

本文是在《Hyde Blog》博主的《顶部滚动条》文章基础上增加了一些自己的实际操作记录和修改，内容依旧属于原作者所有。转载无需和我联系，但请注明文章来源。如果侵权之处，请联系博主进行删除，谢谢。

环境

2025.4.26(已解决)

警告

次配置适用于Teek@1.0.2-2025.4.10版本（其它版本可自行测试）。

提示

自己开源的《vitepress-theme-teek-one-public》网站模板。

此模板是在《Young Kbt blog》大佬开源项目《vitepress-theme-teek 》基础上修改为自己的风格而成，感谢大佬开发得主题，大佬威武。❤️❤️

1、创建

在docs\.vitepress\theme\components\目录下创建ScrollProgressBar.vue文件，并添加以下代码

VUE

<template>
  <div
    ref="progressBar"
    class="progress-bar"
    :style="{ width: progress + '%' }"
  ></div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";

const progressBar = ref(null);
const progress = ref(0);

const handleScroll = () => {
  const totalHeight =
    document.documentElement.scrollHeight -
    document.documentElement.clientHeight;
  const scrollTop =
    document.documentElement.scrollTop || document.body.scrollTop;
  progress.value = (scrollTop / totalHeight) * 100;
};

onMounted(() => {
  window.addEventListener("scroll", handleScroll);
});

onUnmounted(() => {
  window.removeEventListener("scroll", handleScroll);
});
</script>

<style scoped>
.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(
    114.2deg,
    rgba(184, 215, 21, 1) -15.3%,
    rgba(148, 187, 233, 1) 14.5%,
    rgba(21, 215, 182, 1) 38.7%,
    rgba(129, 189, 240, 1) 58.8%,
    rgba(219, 108, 205, 1) 77.3%,
    rgba(240, 129, 129, 1) 88.5%
  );
  z-index: 9999;
}
</style>

2、使用

在docs\.vitepress\theme\components\目录下的TeekLayoutProvider.vue引入并使用

VUE

<script setup lang="ts" name="TeekLayoutProvider">
import ScrollProgressBar from "./ScrollProgressBar.vue"; //导入顶部滚动条组件
</script>

<template>
  <Teek.Layout>
    ...
    <template #layout-top>
      <!-- 顶部滚动条组件 -->
      <ScrollProgressBar />
    </template>
  </Teek.Layout>
</template>