vue3 点击标签滚动到相应的位置

如图  点击右侧便签，将页面滚动到相应的位置，并且鼠标滚动到相应位置时右侧便签高亮

功能 1. 点击右侧便签 页面滚动相应位置 

我们首先给需要定位滚动的四个部分最头部分别设置唯一的 id ，其次我们点击右侧便签传入他们对应的 id 进行滚动

//点击便签滚动
function roll(item, selector) {
  fage.value = !item ? 1 : item //控制高亮的按钮
  selector = !selector ? 'nengli' : selector //判断当前是否有传入对的 id  如果有那么不是点击的回到顶部 如果没有那么就是点击的回到顶部
  document.getElementById(selector).scrollIntoView({
    behavior: "smooth",  // 平滑过渡
    block: "start"  // 上边框与视窗顶部平齐。默认值
  });
}

如果你不涉及到高亮等功能 只是简单的点击滚动的话 那么只需要通过 document 来滚动即可！

功能 2. 鼠标滚动到相应位置时 右侧便签高亮 

由于我是父组件内滚动 所以使用 wheel 监听滚动 如果是页面滚动 那么使用 window 的滚动事件即可

//滚动事件
function onScroll(event) {

  if (document.getElementById('box').scrollTop + 200 > document.getElementById('zhuanxiang').offsetTop - document.getElementById('box').offsetTop) {
    fage.value = 2
  }
  if (document.getElementById('box').scrollTop + 200 > document.getElementById('zhuanye').offsetTop - document.getElementById('box').offsetTop) {
    fage.value = 3
  }
  if (document.getElementById('box').scrollTop + 200 > document.getElementById('zonghe').offsetTop - document.getElementById('box').offsetTop) {
    fage.value = 4
  }
  if (document.getElementById('box').scrollTop < 100) {
    fage.value = 1
  }


}

 以上的代码是当鼠标滚动是 计算出滚动的距离如果大于 需要高亮的 div 到顶部的距离 那么就是已经滚动到当前位置了 那么就控制高亮