vue饿了么ui 进度条 做一个顶部滚动条

dom

<el-main style="position:relative">
          <el-slider v-model="sliderNum" v-show="scrollw>0" :show-tooltip="false" class="indexslider" :min="0" :max="scrollw"   @input="changePage(sliderNum)"></el-slider>
          <div style="width:100%;height:100%;overflow:auto;background:#eee"  @scroll="handleScroll($event)" id="routerbox" ref="scrollbox">
            <router-view></router-view>
          </div>
        </el-main>

js

data：
 domW: 0,
      scrollw: 0, // 滑块最大值
      mainwidth: 0, // 内部盒子宽度
      sliderNum: 0,
      showside: true,
 watch: {
    '$route': function () {
      this.$nextTick(function () {
        this.setw()
        this.defaultUrl = this.$route.path
      })
    },
    // 'getPath',
    sliderNum: function (val) {
      if (isNaN(val)) {
        this.sliderNum = 0
      }
    }
  },
  methods: {
    changePage (sliderNum) {
      this.$nextTick(() => { // 图片列表栏始终左对齐
        if (this.$refs.scrollbox.scrollTo != undefined) {
          this.$refs.scrollbox.scroll({
            left: sliderNum,
            behavior: 'auto'
          })
        } else {
          this.$refs.scrollbox.scrollLeft = sliderNum
        }
      })
    },
    handleScroll (e) {
      this.sliderNum = e.target.scrollLeft
    },
    setw () {
      this.sliderNum = 0
      this.mainwidth = this.$children[0].$children[1].$children[1].$children[1].$el.clientWidth
      this.scrollw = this.mainwidth - this.$refs.scrollbox.clientWidth
    }
  },
  updated () {
    // this.setw()
  },
  mounted () {
    let href = window.location.href
    this.defaultUrl = href.split('/#')[1]
    this.domW = document.body.clientWidth
    this.setw()
    let that = this
    window.onresize = function () {
      that.setw()
      // 立刻设置高度
      that.domW = document.body.clientWidth// 头部处理
      if (that.$refs.tac.$el.clientHeight > that.$refs.aside.$el.clientHeight) {
        that.$refs.side.style.height = `${that.$refs.tac.$el.clientHeight}px`
      } else {
        that.$refs.side.style.height = '100%'
      }
    }
  },
  destroyed () {
    window.onresize=null
  }

css

滚动条样式
::-webkit-scrollbar {width:8px; height:8px; background-color:transparent;cursor: pointer;} /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar-track {background-color:#fff;cursor: pointer;} /*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-thumb {background-color:rgba(144,147,153,.3); border-radius:10px;cursor: pointer;} /*定义滑块 内阴影+圆角*/
.indexslider{
  position: sticky;
  top:0px;
  z-index:1000;
}
.indexslider .el-slider__button{
  display:none;
  width:8px;
  height:8px;
}
.indexslider .el-slider__runway{
  margin:0;
  height:8px;
}
.indexslider .el-slider__bar{
  border-radius:3px;
  height: 8px
}