Vue =＞ Vue监听组件滚动事件

在dom元素上加ref，利用this.$refs.recordwrapper获取到元素，添加滚动监听事件，希望得到的结果是滚动触发事件handleScroll,现在情况是失效，并没有监听到滚动动作，或者说滚动动作并没有出发事件

• 问题：监听事件的参数写错了，带括号就直接调用了函数，去掉括号就好了

<template>
	<div class="main">
	  <div class="content" ref="recordwrapper">
	  </div>
	</div>
</template>
 
<script>
export default {
  data() {
  },
  watch: {
    'chatList': function(e) {
      if (e.length) {
        this.$nextTick(() => {
          this.$refs.recordwrapper.addEventListener('scroll', this.handleScroll);
        })
      }
    }
  },

  methods: {
       handleScroll () {
      // 变量scrollTop是滚动条滚动时，距离顶部的距离
      this.$nextTick(() => {
        // 获取需要滚动的距离
        var scrollTop = this.$refs.recordwrapper.scrollTop
        // 变量windowHeight是可视区的高度
        var windowHeight = this.$refs.recordwrapper.clientHeight
        // 变量scrollHeight是滚动条的总高度
        var scrollHeight = this.$refs.recordwrapper.scrollHeight
        // 滚动条到底部的条件
        console.log(scrollTop, windowHeight, scrollHeight);
        if (scrollTop == 0 && this.chatList.length !== 0) {
          if (this.count > 1) {
            this.topLoading = true
            this.count -= 1;
            this.getWechatCallDetail()
          }
        }
      })
    }
 
  },
};
</script>
 
<style scoped lang="scss">
.main{
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  -webkit-flex-direction:column;
  .head{
    width: 100%;
    position: fixed;
    top: 0;
    left:0;
    background: #eee;
  }
  .content{
    margin-top: 55px;
    height: 100%;
    flex: 1;
    -webkit-flex: 1;
  }
}
</style>