vue中div的滚动条一直在底部触发事件

有个div里面有个子tab，监听了div的滚轮事件到底部就触发请求，往tab里加数据，但是div的滚轮不因为tab数据增加了而往上调，一直在底部，一直触发请求，直到没有数据了，急死了

触底请求的时候加个判断,防止加载数据函数多次触发
如：this.isRefreshBool = false; 请求完再改为true

  beforeDestroy () {
    // 要进行函数卸载
    this.scroEl.removeEventListener('scroll', this.handleScroll)
  },
  mounted () {
    // this.dragJs()
    this.listenerFunction()
    var scroEl = document.getElementById('scro')
    this.scroEl = scroEl
  },
  methods: {
    // 监听滚动事件 scroEl是table外的div的dom
    listenerFunction (e) {
      var scroEl = document.getElementById('scro')
      scroEl.addEventListener('scroll', this.handleScroll, true)
    },
    handleScroll () {
      // scroel
      var scroEl = document.getElementById('scro')
      // 获取内容高度
      const scrollHeight = scroEl.scrollHeight
      // 获取滚动条纵坐标位置
      const scrollTop = scroEl.scrollTop
      // 我给的div高度是300px
      // 判断是否到底部是的话把数据push进去
      if (scrollHeight === scrollTop + 300) {
        this.dataSource.push({
          name: '测试',
          age: 16,
          address: '测试',
          key: 13
        })
      }
    },
}

看到这个问题刚写的 有些粗糙但是功能应该可以