vue 局部监听下拉框滚动(@scroll=)

需求：页面局部box列表滚动，数据初始显示十条，触底后显示下个十条。
由于后台返回了全部数据，所以数据就需要自己处理了；
给父盒子添加@scroll=“scrollEvent” 可获得父盒子的可视高度和滚动条高度(盒子本身要有高度才会被触发)
父盒子固定高度用于滚动条及触发，关系对比中，文档高度要获取子盒子的

<div class="user-right-card" ref="card" @scroll="scrollEvent">
	 <div ref="cardChild"></div>
</div>

scrollEvent() {
            let boxHeight = this.$refs.card.clientHeight //可视区域的高度
            let boxScrollHeight = this.$refs.card.scrollTop //滚动条高度
            let boxDocumentTop = this.$refs.cardChild.offsetHeight //文档高度
            // 可视区域的高度 + 滚动高度 = 文档高度   => 该文档被滚动条滑到底了
            let isDown= boxScrollHeight - 20 + boxHeight >= boxDocumentTop 
            //触底之后可执行自己业务逻辑，由于触底会触发多次，我在这里用了防抖处理了一下。
            if (isDown) this.debounceFun()
        },