【vue】【intersectionObserver】滚动正文时菜单滚动到对应菜单

场景需求：

• 左侧为菜单列表，右侧是对应菜单的内容，
• 所有内容可进行无缝滚动
• 当内容滚动到对应的菜单时，菜单进行定位并显示到可视区域
• 点击菜单时，对应内容显示到可视区域

涉及知识点：

• intersectionObserver 监听元素是否在可视区域
• scrollIntoView 滚动到可视区域

思路

切换菜单时，内容滚动到对应菜单

• 定义变量active存储当前菜单名称，获取当前内容ref进行scrollTop滚动

效果图

滚动内容时，菜单切换对应菜单并可见

• 页面加载时使用intersectionObserver.observe()建立观察，观察每一个内容是否在可视区域
• 当内容出现在可视区域时，当entrie.intersectionRatio返回值不是0的时候，使用entrie.target.innerHTML.trim()拿到当前激活的菜单名称赋值给active
• 此时active的值进行变化，有了新的ref名称activeMenu，于是使用scrollIntoView将新的激活菜单滚动到可视区域即可

效果图

HTML

  <div class="content-box">
    <div class="menu-tabs">
      <div
        class="tab"
        :class="{
    'tab-active':active === item.name}"
        v-for="(item,index) in menuList"
        :key="index"
        :ref="active === item.name ? 'activeMenu':''"
        @click="menuClick(item.name,index)">
        <span>{
  { item.name }}</span>
      </div>
    </div>
    <div class="content-wrap" id="contentWrap">
      <div
        class="content"
        v-for="(content,index) in this.contentList"
        :key