vue 侧边栏滚动跟随页面（点击跳到指定标题）

梁小茹

已于 2022-08-08 16:50:52 修改

阅读量1.8k

点赞数 3

分类专栏： vue 文章标签： vue.js javascript 前端

于 2022-08-01 18:04:32 首次发布

本文链接：https://blog.csdn.net/weixin_46653486/article/details/126106094

版权

vue 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

直接看代码：

整个页面滚动盒子
<div @scroll="handleScroll">
     .....
</div>

侧边导航盒子
<div class="right-content">
  <div class="line-left">
      <div class="menuList">
         <div
          v-for="(item,index) in tabList"
          :key="index"
          :class="activeName == index ? 'line' : '' "
          @click=""handleCliack(index)
          >
           <div  :class="activeName == index ? 'text-color' : '' ">
             {{item}}
           </div>
         </div>
      </div>
  </div>
</div>

data里边

activeName: 0,
tabList:[
  '基本信息'，
  '项目信息'，
  '问题描述'，
  '问题总结'，
  '问题确认'，
]

方法：

*projectInfo* 是每个点击项设置同样的name="projectInfo"

// 点击进行跳转
handleClick(index) {
    this.activeName = index
    let ele =  document.getElementsByName("projectInfo")[index]
    ele.scrollIntoView({
       behavior:"smooth",
       block: "startt"
    })
}

//滑动
handleScroll(e) {
  let ele =  document.getElementsByName("projectInfo")
   for( let i = ele.length - 1; i >= 0 ; i-- ) {
      let judge = e.target.scrollTop >= elel[i].offsetTop = ele[0].offsetTop
      if(judge) {
          this.activeName = i
          break
      }
   } 
}