垂直screen导航

<template>
  <div class="demo1">
    <div class="container">
      <div class="navUl">
        <div class="navLi"
             v-for="(item,index) in navList"
             :class="{'active':num===index}"
             :key="index" @click="navClick('div' + index, 100)">{{item.navName}}</div>
      </div>
      <div class="contScroll">
        <div id="div0" ref="div0">技术百科</div>
        <div id="div1" ref="div1">传播趋势</div>
        <div id="div2" ref="div2">网民态度</div>
        <div id="div3" ref="div3">国家政策</div>
        <div id="div4" ref="div4">行业之声</div>
        <div id="div5" ref="div5">突出问题</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      navList:[
        {navName:'技术百科',navIcon:'icon'},
        {navName:'传播趋势',navIcon:'icon'},
        {navName:'网民态度',navIcon:'icon'},
        {navName:'国家政策',navIcon:'icon'},
        {navName:'行业之声',navIcon:'icon'},
        {navName:'突出问题',navIcon:'icon'},
      ],
      num:0,
    }
  },
  mounted() {
    document.addEventListener('scroll', this.handleScroll, true)
  },
  methods:{
    handleScroll(e){
      let scrollTop = e.target.scrollTop || window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop // 滚动条偏移量
      let num=this.navList.length
      for (let n = 0; n < num; n++) {
        if(document.querySelector("#div"+n).offsetTop<scrollTop+40){
          this.num=n
        }
      }
    },
    navClick(el, speed){
      let _this = this;
      let windowH = window.innerHeight; //浏览器窗口高度
      let h = this.$refs[el].offsetHeight; //模块内容高度
      let t = this.$refs[el].offsetTop; //模块相对于内容顶部的距离
      let top = t //需要滚动到的位置，若改为 t 则滚动到模块顶部位置，此处是滚动到模块相对于窗口垂直居中的位置
      let scrollTop =
          window.pageYOffset ||
          document.documentElement.scrollTop ||
          document.body.scrollTop; //滚动条距离顶部高度
      let currentTop = scrollTop; //默认滚动位置为当前滚动条位置，若改为0，则每次都会从顶部滚动到指定位置
      let requestId;
      //采用requestAnimationFrame，平滑动画
      function step() {
        //判断让滚动条向上滚还是向下滚
        if (scrollTop < top) {
          if (currentTop <= top) {
            //   window.scrollTo(x,y) y为上下滚动位置
            window.scrollTo(0, currentTop);
            requestId = window.requestAnimationFrame(step);
          } else {
            window.cancelAnimationFrame(requestId);
          }
          //向下滚动
          currentTop += speed;
        } else {
          if (top <= currentTop) {
            //注：此处 - speed 是解决居中时存在的问题，可自行设置或去掉
            window.scrollTo(0, currentTop);
            requestId = window.requestAnimationFrame(step);
          } else {
            window.cancelAnimationFrame(requestId);
          }
          //向上滚动
          currentTop -= speed;
        }
      }
      window.requestAnimationFrame(step);
//      this.num=index
//      let navPage = document.querySelector("#div" + index);
//      document.documentElement.scrollTop=navPage-20   //兼容大部分浏览器
      //window.scrollTo({      //不兼容ie
      // 'top':navPage.offsetTop - 20,
      // })
    }
  }
};
</script>

<style scoped lang="scss">
.demo1{
  .container{
    width: 100%;
    .navUl{
      width:120px;
      position: fixed;
      top:20px;
      background: #ebebeb;
      .navLi{
        width: 100%;
        line-height: 35px;
        text-align: center;
        border-bottom: 1px solid #fff;
        cursor: pointer;
        //&:hover{
        //  border-right: 3px solid #FC9103;
        //  opacity: 0.8;
        //}
      }
      .navLi.active{
        border-right: 3px solid #FC9103;
      }
    }
    .contScroll{
      width: calc(100% - 122px);
      margin-left: 122px;
      div{
        width: 100%;
      }
      #div0{height: 1000px;background: #FC9103;}
      #div1{height: 1000px;background: blueviolet;}
      #div2{height: 1000px;background: #2894f8;}
      #div3{height: 1000px;background: orangered;}
      #div4{height: 1000px;background: green;}
      #div5{height: 1000px;background: red;}
    }
  }

}
</style>