vue监控指定div滑动触底

一共有两种方法，但是不论哪种方法，
一定要给监听的div设置overflow-y: scroll;属性！
一定要给监听的div设置overflow-y: scroll;属性！
一定要给监听的div设置overflow-y: scroll;属性！
不然监听不到滑动到屏幕上方的高度！

<div class="person" ref="personDom" @scroll="handlerScroll($event)" ></div>

方法一：给指定div设置监听事件
mounted({
		this.$refs.personDom.addEventListener('scroll',this.handleScroll,true);
    }
    
methods:{
	handleScroll(){
		var scrollTop = this.$refs.personDom.scrollTop; //滑入屏幕上方的高度
        var windowHeitht = this.$refs.personDom.clientHeight; //能看到的页面的高度
        var scrollHeight = this.$refs.personDom.scrollHeight; //监控的整个div的高度（包括现在看到的和上下隐藏起来看不到的）
        let total = scrollTop + windowHeitht
            if(total == scrollHeight){
                console.log("到底了")
            }
	}
}

方法二：div有个@scroll方法可以直接用
methods:{
	handlerScroll(e){
		const dom = e.target
        var scrollTop = dom.scrollTop; //滑入屏幕上方的高度
        var windowHeitht = dom.clientHeight; //能看到的页面的高度
        var scrollHeight = dom.scrollHeight; //监控的整个div的高度（包括现在看到的和上下隐藏起来看不到的）
        let total = scrollTop + windowHeitht
            if(total == scrollHeight){
                console.log("到底了")
            }
	}

this.$refs.table.bodyWrapper.addEventListener('scroll', (res) => {
      let height = res.target;
      let clientHeight = height.clientHeight;
      let scrollTop = height.scrollTop;
      let scrollHeight = height.scrollHeight;
      if(clientHeight + scrollTop + 300 > scrollHeight){
        this.tableLoading=true
        this.dataEmbranchment=this.tableData.slice(0,this.size*this.page)
        this.page++;
        this.tableLoading=false
      }
    },true);