vue pc商城侧边快捷导航栏

页面

HTML部分 

大盒子包裹所有小盒子

<div class="home_classification w" ref="home_classification">
      <classification :obj="obj" v-for="(obj, index) in classificationTree"             
      :class="'socroll_'+obj.id" :ref="'socroll_'+obj.id" :key="obj.id" 
       :isLogin="isLogin" />
</div>

JS部分

computed: {
    // 侧边栏
    refClassification () {
      return this.$refs.home_classification
    }
 },
mounted () {
    this.rightTopBox()
 },
// mounted 下调用
rightTopBox () {
        // 调用方法得到该elDOM元素是否处于可视区域
      let observer = new IntersectionObserver(([{ isIntersecting }]) => { 
        this.classificationShow = isIntersecting
      })
      observer.observe(this.refClassification) // 调用方法
},
// 点击侧边栏
rightSocroll (domHtml) {
      const socrollBox = document.querySelector(`.${domHtml}`)
      socrollBox.scrollIntoView({ behavior: "smooth" })
}

使用方法

IntersectionObserver - Web API 接口参考 | MDN

Element.scrollIntoView() - Web API 接口参考 | MDN