vue 监听滚动条是否到底部and 是否到top

vue 监听滚动条是否到底部

<div class="test">
     <div class="it-content"  @scroll="scrollEvent" >
      <p class="it-p" v-for="(item,index) in listData" :key="index">{{item.content}}{{item.fromUserName}}</p> 
    </div>
    <p v-show="showData==0">没数据了</p>
</div>

export default {
  data() {
    return {
      listData:[],
      showData:-1,//有无数据
      parmasList:{
          orgId: 1,
          pageNum: 1,
          pageSize: 10,
      }
    };
  },
  computed: {},
  methods: {
    //消息列表
    send(parmas) {
      queryByUser(parmas).then(res=>{
        if(res.data.httpCode == 200){
          if(res.data.data.records.length ==0){
            this.showData = res.data.data.records.length;
          }
         this.listData =  this.listData.concat(res.data.data.records);
        }
      })
    },
    // 滚定监听
    scrollEvent(e){
      if(e.currentTarget.scrollTop+e.currentTarget.clientHeight>=e.currentTarget.scrollHeight){
         this.parmasList.pageNum = this.parmasList.pageNum+1;
         this.send(this.parmasList);
      }
    }
  },
  created(){
      this.send(this.parmasList);//请求数据 
  }
};
</script>

<style lang="less">
.test{
  padding: 20px;
  .it-content{
    width: 300px; 
    height: 250px;
    margin: 50px auto;
    overflow-y: scroll;
  }
  .it-p{
    height: 30px;
    line-height: 30px;
  }
}
如果 e.currentTarget.scrollTop == 0 ,就到头部啦

如有有更好的方法请求分享，谢谢，❥(^_-)