css+js实现刻度尺导航

某次写官网时，侧面有个刻度尺导航，找了很久没找到，就只能用原生写一个，有些简陋，但是凑合能用，滚动条的距离没处理，有厉害的前辈可以帮忙看看。

就类似于这种功能

1，根据需求先布局写样式

    <div class="kedus" >
      <div :class="['kedu',index%5==0||index==0?'home':'',index==scrollindex?'active':'']" v-for="(i,index) in 31" :key="index" @click="goscroll(index)"></div>
    </div>

2，在data中定义出要用到的参数 

 data() {
    return {
      scrollheight:0,//页面高度
      itemscroll:0,//每个刻度的高度
      scrollindex:0,//滚动刻度的数
      kedu:[],//刻度尺的dom
    }
  },

3， 页面加载时获取页面高度并监听滚动事件

 mounted(){
    this.kedu=document.querySelectorAll('.kedu') //获取刻度列表
    window.addEventListener("scroll", this.getscroll);//监听滚动事件
    let scrollHeight =
    document.documentElement.scrollHeight || document.body.scrollHeight;//获取页面高度
    this.scrollheight=scrollHeight
    this.itemscroll=this.scrollheight/30//每个刻度的高度
    this.kedu[0].setAttribute('attr','true')//默认给第一个刻度加样式
  },

4，滚动时刻度尺根据滚动条变化，点击刻度尺，页面也跟着变化 

 getscroll(){
     let scrollTop =
        document.documentElement.scrollTop ||
        document.body.scrollTop;//获取当前滚动条高度
   
     this.scrollindex= Math.ceil(scrollTop/this.scrollheight*30)<1?0:Math.ceil(scrollTop/this.scrollheight*30)>=26?30:Math.ceil(scrollTop/this.scrollheight*30)
     //滚动是修改样式
        for (let a = 0; a < this.kedu.length; a++) {
            this.kedu[a].setAttribute('attr','false')
        }
        if(this.scrollindex==0||this.scrollindex%5==0){
          this.kedu[this.scrollindex].setAttribute('attr','true')
        }else{
          this.kedu[this.scrollindex].setAttribute('attr','false')
        }
    },
    //点击刻度尺时修改滚动条位置及样式
    goscroll(i){
      console.log(i)
        document.documentElement.scrollTop = document.body.scrollTop =this.itemscroll*i
        for (let a = 0; a < this.kedu.length; a++) {
          this.kedu[a].setAttribute('attr','false')
        } 
        if(i==0||i%5==0){
          this.kedu[i].setAttribute('attr','true')
        }else{
          this.kedu[i].setAttribute('attr','false')
        }
    }

 刻度尺的样式

.kedus{
    position: fixed;
    right: 0.2rem;
    top: calc(50% - 1rem);
    height: 2rem;
    width: 0.24rem;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: flex-end;
    .kedu{
        width: 0.08rem;
        height: 0.03rem;
        background-color: #1ad8dc;
        &:nth-of-type(1)::before{
            content: "HOME";
            font-size: 0.18rem;
            position: absolute;
            top: -0.1rem;
            left: -0.6rem;
            color:#1ad8dc;
            display: none;
        }
        &[attr=true]:nth-of-type(1)::before{
            display: block;
        }
        &:nth-of-type(6)::before{
            content: "02";
            font-size: 0.18rem;
            position: absolute;
            top: -0.1rem;
            left: -0.25rem;
            color:#1ad8dc;
            display: none;
        }
        &[attr=true]:nth-of-type(6)::before{
            display: block;
        }
        &:nth-of-type(11)::before{
            content: "03";
            font-size: 0.18rem;
            position: absolute;
            top: -0.1rem;
            left: -0.25rem;
            color: #1ad8dc;
            display: none;
        }
        &[attr=true]:nth-of-type(11)::before{
            display: block;
        }
        &:nth-of-type(16)::before{
            content: "04";
            font-size: 0.18rem;
            position: absolute;
            top: -0.1rem;
            left: -0.25rem;
            color:#1ad8dc;
            display: none;
        }
        &[attr=true]:nth-of-type(16)::before{
            display: block;
        }
        &:nth-of-type(21)::before{
            content: "05";
            font-size: 0.18rem;
            position: absolute;
            top: -0.1rem;
            left: -0.25rem;
            color: #1ad8dc;
            display: none;
        }
        &[attr=true]:nth-of-type(21)::before{
            display: block;
        }
        &:nth-of-type(26)::before{
            content: "06";
            font-size: 0.18rem;
            position: absolute;
            top: -0.1rem;
            left: -0.25rem;
            color:#1ad8dc;
            display: none;
        }
        &[attr=true]:nth-of-type(26)::before{
            display: block;
        }
        &:nth-of-type(31)::before{
            content: "07";
            font-size: 0.18rem;
            position: absolute;
            top: -0.1rem;
            left: -0.25rem;
            color: #1ad8dc;
            display: none;
        }
        &[attr=true]:nth-of-type(31)::before{
            display: block;
        }
        &.active{
            height: 0.04rem;
            width: 0.34rem;
        }
    }