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

页面描述：页面分为左右两个部分，左边是目录树，右边是id=main_box的div，在main_box中含有多个div并列，上下排布，数量较多，页面上放不下，所以设置了main_box的css样式：

.main_box {
    overflow-y:scroll;
}

让main_box可以滚动，但是我希望知道滚动到哪个子div了，好让左边的目录树对应的节点高亮显示

mounted() {
        this.refreshData();
        // 通过$refs获取dom元素
        this.box = this.$refs.viewBox;
        // 监听这个dom的scroll事件
        this.box.addEventListener('scroll', () => {
            /*console.log(" scroll " + this.$refs.viewBox.scrollTop);*/

            var current_offset_top = this.$refs.viewBox.scrollTop;

            if(this.elements.low.index == this.elements.high.index){
              //初始状态
              this.elements.high.index ++;
              let i = this.elements.high.index;
              var catogry = this.code_data[i].catogry;
              var id = this.gernerateId(catogry,i);
              var e = document.getElementById(id); 
              if(e == undefined || e == null){
                console.log("getElementById没有找到id为"+id+"的元素");
              }
              else{
                this.elements.high.offsetTop = e.offsetTop;
              }
            }
            else if( current_offset_top >= this.elements.low.offsetTop && current_offset_top <= this.elements.high.offsetTop){
              //缓存数据未过期
            }
            else if(current_offset_top < this.elements.low.offsetTop){
              //向上滚动，超出低区域

              //找到第一个满足offsetTop < current_offset_top的元素
              var cahce = this.elements.low.offsetTop;
              for(let i = this.elements.low.index;i >=0;i--){
                var catogry = this.code_data[i].catogry;
                var id = this.gernerateId(catogry,i);
                var e = document.getElementById(id); 
                if(e == undefined || e == null){
                  console.log("getElementById没有找到id为"+id+"的元素");
                }
                else if(e.offsetTop < current_offset_top){
                  //找到
                  this.elements.low.index = i;
                  this.elements.low.offsetTop = e.offsetTop;
                  this.elements.high.index = i + 1;
                  this.elements.high.offsetTop = cahce;
                  break;
                }
                else{
                  //没有找到，下一轮循环继续
                  cahce = e.offsetTop;
                }
              }
            }
            else{
              //向下滚动，超出高区域
              var cahce = this.elements.low.offsetTop;
              //找到第一个满足offsetTop > current_offset_top的元素
              for(let i = this.elements.high.index;i <= this.code_data.length;i++){
                var catogry = this.code_data[i].catogry;
                var id = this.gernerateId(catogry,i);
                var e = document.getElementById(id); 
                if(e == undefined || e == null){
                  console.log("getElementById没有找到id为"+id+"的元素");
                }
                else if(e.offsetTop > current_offset_top){
                  //找到
                  this.elements.high.index = i;
                  this.elements.high.offsetTop = e.offsetTop;
                  this.elements.low.index = i - 1;
                  this.elements.low.offsetTop = cahce;
                  break;
                }
                else{
                  //没有找到，下一轮循环继续
                  cahce = e.offsetTop;
                }
              }
            }
            /*console.log("low is "+this.elements.low.index);
            console.log("high is "+this.elements.high.index);
            console.log("滚动到了："+this.code_data[this.elements.low.index].title+'与'+this.code_data[this.elements.high.index].title+'之间');*/

            // 设置左边目录树中对应节点高亮
            this.$refs.viewTree.setCurrentKey(this.code_data[this.elements.high.index].catogry);

        }, false);
    }

因为页面的构建使用了vue和element-ui所以是放在mounted函数中的

data() {
      return {
        /*别的代码省略*/
        elements:{
          low:{
              index:0,
              offsetTop:0
          },
          high:{
              index:0,
              offsetTop:0
          }
        },
      }
    },

方法是别的网站上看来的，具体链接忘记了，就不贴了