vue监听页面中的某个div的滚动事件，并判断滚动的位置

在开发中常常会遇到这样一个vue页面，页面分为左右两部分，左边是目录树，右边是一个类名为xq-box的div，在xq-box中多个div上下并列布局，每个div中的内容就对应着左边目录树中的相应节点，现在的目标是，要监听这个xq-box滚动事件，右边一旦开始滚动，就要知道滚动到哪个子div，并让左边的目录树中对应的节点高亮显示。要怎么做呢？

1、首先，先写好大概的页面布局，这里要注意，右边xq-box的子div要绑定"'xqItem'+序号"的id，为了下面用js能获取到匹配的dom元素：

<template>
    <div class="container">
        <div class="left-box">
          <div class="menu-box">
            <div class="menu-title">
              <p>目录p>
            div>
            <div
              class="menu-item"
              v-for="(menu, index) in menuList"
              :key="index"
              :class="{ 'active': menuActive === index }"
              @click="chooseMenu(menu.name, index)"
            >
              <img :src="menu.icon" class="menu-icon" />
              <p>{{ menu.name }}p>
            div>
          div>
        div>
        <div class="right-box">
          <div class="xq-box" ref="xqBox">
            <div
                class="xq-item"
                :id="'xqItem' + index"
                v-for="(item, index) in xqConList"
                :key="index"
              >
                 
                 <div class="xq-item-name">
                    {{ item.name }}
                  div>
                  <div class="xq-item-con">
                    {{ item.content }}
                  div>
              div>
          div>
        div>
    div>
template> 

View Code

 2、然后，在css里给xq-box高度，设置其超出能滚动：