浏览器的scroll进度条

发表于 更新于 分类于

实现

效果

英雄联盟 s9 的时候，看英雄联盟官网的文章发现有这个效果：就是随着滚动条的下拉，最上部会有一个相应的进度条，就研究了一下，做一个记录。

App.vue

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
<template>
  <div id="app">
    <div class="process" ref="process"></div>
  </div>
</template>

<script>
  export default {
    name: "app",
    mounted() {
      window.addEventListener("scroll", this.calculatePer)
    },
    methods: {
      calculatePer() {
        const h = document.documentElement
        const b = document.body
        const st = "scrollTop"
        const sh = "scrollHeight"
        const color = "#ffdd67"
        let percentage = (h[st] || b[st]) / ((h[sh] || b[sh]) - h.clientHeight) * 100
        // console.log(this.$refs.process)
        this.$refs.process.style.background = `linear-gradient(to right, ${color} ${percentage}%, transparent 0)`
      }
    }
  }
</script>

<style lang="scss">
  .process {
    position: fixed;
    top: 0;
    width: 100%;
    height: 4px;
    // background: linear-gradient(to right, $yellow 24%, transparent 0);
    z-index: 3;
  }
</style>

上面是关键的代码部分，其中主要的就是 JavaScript 那部分的代码。下面的这张图有助于理解。

结构图

参考

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollTop

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollHeight

https://juejin.im/user/5bea27965188250edf4ad8b7/pins