SOURCE

console 命令行工具 X clear

                    
>
console
<div class="wrapper" id="app">
  <div class="d1">滑动滚动条查看进度</div>
  <div class="jindu-bar" :style="'width:' + jindud"></div>
</div>


<script src="https://lib.baomitu.com/vue/2.6.10/vue.min.js"></script>
<script>
  'use strict'
  let vm = new Vue({
    el: '#app',
    data() {
      return {
        pwidth: 0,
      }
    },
    methods: {
      setProgress() {
        window.onscroll = (e) => {
          let doc = document.documentElement
          let sTop = doc.scrollTop
          let zys = doc.scrollHeight - doc.clientHeight
          this.pwidth = (sTop / zys) * 100
        }
      },
    },
    computed: {
      jindud() {
        return Math.min(this.pwidth, 100) + '%'
      }
    },
    mounted() {
      this.setProgress()
    },
  })
</script>

      * {
        margin: 0;
        padding: 0;
        list-style: none;
      }
      body {
        font-size: 14px;
        font-family: -apple-system, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Arial, sans-serif;
        color: #27282b;
        background: #fff;
      }
      a {
        text-decoration: none;
        color: #27282b;
      }
      *,
      *::before,
      *::after {
        outline: none;
        box-sizing: border-box;
      }
      html,
      body {
        height: 100%;
      }
      .d1 {
        width: 30%;
        height: 3000px;
        background: #eee;
        user-select: none;
        margin: 0 auto 100px auto;
        border-bottom: 100px solid #000;
      }
      .jindu-bar {
        height: 2px;
        background: #bf2ad3;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 999;
      }