Where does the vue el-steps page scroll to which one lights up + click the page to locate a certain position

Effect:

 1. Encapsulate the right el-steps component: StepsYes.vue
 

<template>
    <div class="step">
        <el-steps direction="vertical">
            <el-step :title="item" v-for="(item, index) in titleList" :key="item"
                :status="active == index ? 'finish' : 'wait'"></el-step>
        </el-steps>
    </div>
</template>
  
<script>
export default {
    props: {
        titleList: {
            // type: Array,
            default: []
        },
        index: {
            // type: Number,
            default: 0
        }
    },
    watch: {
        index(val) {
            this.active = val
        }
    },
    data() {
        return {
            active: 0
        }
    },
    mounted() {
        let that = this
        // 注册点击事件，获取索引
        const stepItem = document.getElementsByClassName('el-step__icon')
        for (let i = 0; i < stepItem.length; i++) {
            stepItem[i].addEventListener('click', function () {
                that.active = i
                that.$emit('onBack', i)
            })
        }
    }
}
</script>
  
<style   scoped>
.step {
    height: 80%;
    /* // width: 10px; */
    position: fixed;
    top: 50%;
    right: 10px;
    transform: translate(0, -50%);
}

/deep/ .el-step__icon {
    cursor: pointer;
}
</style>
  

2. Main page:
 

<template>
  <div class="container">
    <div class="main">
      <el-scrollbar ref="scrollbar">
        <div class="item" v-for="(item, index) in itemList" :key="index" :style="`background:${item.color};`">
          {
   
   { item.title }}
        </div>
      </el-scrollbar>
    </div>
    <StepsYes :titleList="titleList" @onBack="onBack" :index="index"></StepsYes>
  </div>
</template>

<script>
import StepsYes from '../components/StepsYes'
export default {
  components: {
    StepsYes
  },
  data() {
    return {
      titleList: ["标题1", "标题2", "标题3", "标题4", "标题5", "标题6"],
      itemList: [
        { color: 'red', title: '标题1' },
        { color: 'blue', title: '标题2' },
        { color: 'green', title: '标题3' },
        { color: 'purple', title: '标题4' },
        { color: 'khaki', title: '标题5' },
        { color: 'skyblue', title: '标题6' }
      ],
      scrollBox: {},
      offsetTop: [],
      index: 0
    }
  },
  mounted() {
    // 获取有滚动条盒子的对象
    this.scrollBox = this.$refs.scrollbar.$refs.wrap
    // 获取滚动内的每个盒子距离顶部的距离
    const dom = document.getElementsByClassName('item')
    for (let i = 0; i < dom.length; i++) {
      this.offsetTop.push(dom[i].offsetTop)
    }
    // 侦听滚动
    this.scrollBox.addEventListener('scroll', () => {
      this.offsetTop.forEach((item, index, arr) => {
        if (this.scrollBox.scrollTop >= item - 1 && this.scrollBox.scrollTop < arr[index + 1]) {
          this.index = index
        }
      })
    })
  },
  methods: {
    onBack(index) {
      this.scrollBox.scrollTop = this.offsetTop[index]
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  width: 80%;
  height: 700px; // 建议设置父级元素的高度，这样div.el-scrollbar就可以通过%来设置高度
  padding: 0;
  overflow: hidden;
  border: 1px solid #ccc;

  .el-scrollbar {
    width: 100%; // 宽度可以设置也可以不设置 因为宽度默认就是填充满父级元素的内容区
    height: 100%; // 必须设置el-scrollbar的高度

    ::v-deep .el-scrollbar__wrap {
      // 实际上我们的内容是放在这个div下面的
      // height: 100%; // 渲染出来的div.el-scrollbar__wrap默认会添加height:100%的属性。我们可以设置为105%来隐藏元素水平滚动条
      height: 100%;
      overflow: scroll;
      overflow-x: auto;
    }
  }
}

.item {
  height: 400px;
  color: #000;
  font-size: 20px;
  font-weight: bold;
}
</style>