楼梯滚动效果

<template>
  <div class="box">
    <ul>
      <li v-for="(item, inx) in 10" :key="inx" :class="[`lou_${inx}`, { 'active': inx == current }]">
        <a @click="navCheck(inx)">导航{{ inx }}</a>
      </li>
    </ul>
    <div class="content" ref="scrollview" @scroll="onScroll">
      <section :id="[`lou_${inx}`]" v-for="(item, inx) in 10" :key="inx">
        <h6>标题{{ inx }}</h6>
        <div>
          <p>内容内容内容内容内容内容内容内容内容内容内容</p>
          <p>内容内容内容内容内容内容内容内容内容内容内容</p>
          <p>内容内容内容内容内容内容内容内容内容内容内容</p>
          <p>内容内容内容内容内容内容内容内容内容内容内容</p>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        current: 0,
        isNav: false,
        timer: null
      }
    },
    beforeDestroy() {
      clearTimeout(this.timer)
    },
    methods: {
      // 导航点击
      navCheck(inx) {
        this.current = inx
        this.isNav = true
        clearTimeout(this.timer)
        this.timer = setTimeout(() => {
          this.isNav = false
        }, 1000)
        let lou = `#lou_${inx}`
        document.querySelector(lou).scrollIntoView({
          behavior: "smooth",
          // block: 'center',  // 滑动到视图中间位置
        })
      },
      // 内容区域滚动
      onScroll() {
        let scrollTop = this.$refs['scrollview'].scrollTop;
        // 获取所有锚点元素
        const AllNav = document.querySelectorAll('.content section')
        // 获取所有锚点元素的 offsetTop
        const offsetTopArr = []
        AllNav.forEach(item => {
          offsetTopArr.push(item.offsetTop - 68)
        })
        for(let i = 0; i < offsetTopArr.length; i++) {
          // 内容已经完全不可见
          if(scrollTop >= offsetTopArr[i]) {
            // 导航点击时，不滚动设置
            if(!this.isNav) {
              this.current = i
            }
          }
        }
      },
    },
  }
</script>

<style lang="scss" scoped>
  .box {
    display: flex;
    height: 600px;
    ul {
      width: 80px;
      padding-top: 30px;
      li {
        line-height: 36px;
        &.active {
          background: rgba(0,102,255,0.1);
        }
        &:hover{
          background: rgba(0,102,255,0.1);
        }
        a{
          display: block;
          padding: 0 16px;
        }
      }
    }
    .content{
      width: 400px;
      overflow-y: auto;
      box-sizing: border-box;
      section{
        padding: 30px 0;
        border-bottom: 1px solid #ddd;
        h6{
          font-size: 20px;
        }
        > div{
          margin-top: 24px;
          color: #595959;
          line-height: 24px;
        }
      }
    }
  }
</style>