vue中点击滚动到指定位置，监听滚动返回选中状态

点击一个元素滚动到页面某个位置，可以简单通过锚点和scrollTop方法来实现。
但在此处我们通过scrollTo方法来实现，再设置滚动行为smooth平滑滑动，让过程更加顺畅，话不多话，马上上代码！

<template>
  <div class="wrap">
    <div class="pou">
      <div class="blo" 
      :class="{'active': active1 === index}" 
      v-for="(item, index) in list" :key="index" 
      @click="clickHandle(item.option, index)"
      ><span>{{item.values}}</span></div>
    </div>
    <div>
      <div ref="select" style="height: 500px">
        <span style="color: #f0f;">精选内容：</span>
        Lorem ipsum dolor sit amet consectt!
      </div>
      <div ref="comduce" style="height: 800px">
        <span style="color: #f0f;">推荐内容：</span>
        Lorem ipsum dolor sit amet consectetur o?
      </div>
      <div ref="normal" style="height: 900px">
        <span style="color: #f0f;">普通内容：</span>
        Lorem ipsum dolor sit, amet consectetur adipisicing elrum at.
      </div>
    </div>
  </div>
</template>

 data () {
     return {
       list: [],
       active1: 0
     }
   },
 mounted () {
    this.list = [
      {
        values: '精选',
        active: true,
        option: this.$refs.select.offsetTop
      },
      {
        values: '推荐',
        active: false,
        option: this.$refs.comduce.offsetTop
      },
      {
        values: '普通',
        active: false,
        option: this.$refs.normal.offsetTop
      }
    ]
  }

渲染完成后，加入点击事件！

clickHandle (top, index) {
      this.active1 = index
      window.scrollTo({
        top: top,
        behavior: 'smooth'
      })

现在已经实现点击滚动了, 然而我们加入元素选中状态后，还可以实现滚动到哪个位置选中状态到哪个元素！
首先在mounted生命周期里监听页面滚动事件

window.addEventListener('scroll', this.handleScroll, false)

然后在定时器里翻转list数组后遍历数组，当卷上去的高度小于等于scrollTop高度时，计算出最后的元素选中状态，最后再赋值给active1

handleScroll () {
     const aa = document.documentElement.scrollTop
     setTimeout(() => {
       const arr = [...this.list].reverse()
       for (var i = 0; i < arr.length; i++) {
         if (arr[i].option <= aa) {
           this.active1 = arr.length - 1 - i
           break
         }
       }
     }, 200)
     this.active1 = this.active
   }

最后一步千万别忘了移除监听滚动事件哟！

destroyed () {
    window.removeEventListener('scroll', this.handleScroll, false)
  }

再最后贴上css和效果图

<style lang="scss">
.wrap {
  background: #ffcdff;
  padding: 0 20px;
  .pou {
    position: fixed;
    bottom: 60px;
    right: 10px;
    text-align:center;
    z-index:2;
    background: #dad8d8;
    .blo {
      padding: 9px;
      &:hover, &.active {
        background: #f0f;
        padding: 9px;
        color: #fff;
      }
    }
  }
}
</style>