1.想要实现的效果

twst.gif

2. 需求

div滚动的时候，根据滚动的距离，来判断页签的高亮和定位

3. 实现原理

使用addEventListener监听div的scroll事件，获取div滚动的sceollTop， 使用forEach来获取div所在的offsetTop值，当scrollTop >= item.offsetTop 时，就高亮当前楼梯
使用scrollTo的 behavior: 'smooth'来定位我们要的楼梯的位置

4. 实现代码

  mounted() {
    this.box = this.$refs.viewBox // 获取dom元素
    this.box.addEventListener('scroll', () => {
      const top = this.$refs.viewBox.scrollTop
      this.navScroll(top)
    })
  },
  methods:{
    navScroll(top) {
      const scrollTop = top
      const floor = document.querySelectorAll('.approval-floor')
      floor.forEach((item, index) => {
        if (scrollTop >= item.offsetTop) {
          this.navNum = index
          this.activeName = String(index)
          // break
        }
      })
    },
    handleClick() {
      // 滚动到指定位置
      const floor = document.querySelectorAll('.approval-floor')
      const offsetTop = floor[this.activeName].offsetTop
      this.$refs.viewBox.scrollTo({
        top: offsetTop,
        behavior: 'smooth'
      })
    }
  }