vue监听组件滚动事件

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

<template>
<div class="main">
  <tab class="head" :nav="nav" @tabClick="tabClick"></tab>
  <div class="content" ref="content">
    <tab1 ref="product"></tab1>
    <tab2 ref="comment"></tab2>
    <tab3 ref="specification"></tab3>
  </div>
</div>
</template>

<script>
import tab from './components/tab';
import tab1 from './components/tab1';
import tab2 from './components/tab2';
import tab3 from './components/tab3';

export default {
  data() {
    this.scrollDom = null;
    return {
      nav: {
        navIndex: 0,
        navTabs: ['tab1', 'tab2', 'tab3'],
      },
      floorScrollTops: [],
      navHeight: 55,
    };
  },
  components: {
    tab,
    tab1,
    tab2,
    tab3,
  },
  created() {
  },
  mounted() {
    this.$nextTick(() => {
      this.initScrollDom();
      this.initEvent(this.scrollDom);
    });
  },
  methods: {
    tabClick(i) {
      this.nav.navIndex = i;
    },
    initScrollDom() {
      this.scrollDom = this.$refs.content;
    },
    initEvent(dom) {
      dom.addEventListener('scroll', this.scrollHander());
    },
    scrollHander() {
      console.log(this.scrollDom);
      const top = this.scrollDom.scrollTop;
      console.log(top);
    },

  },
};
</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>

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

相关问题：如何只让下面的部分滚动，添加如下代码就好，height最好是一层一层继承，不要让内部元素撑开