设置根view的overflow为scroll时如何触发触底事件

如题，有如下页面，页面中有一个长列表

<template>  
<view class="root">  
<uni-list>  
   <uni-item v-for="(e,index) in data" :key="index" :title="e">  
</uni-list>  
<uni-load-more :status="status" />  
</template>  
<script>  
    import {getData} from '../../utils/xx.js'  
    export default {  
        data() {  
            return {  
                data:[],  
                  status: 'more',  
                  pg: 1  
            }  
        },  
        onReachBottom(){  
            this.loadMoreData()  
        },  
        methods:{  
            loadMoreData(){  
                this.status = 'loading'  
                // 加载数据...  
                this.data = getData(this.pg)  
                this.pg += 1  
                this.status = 'more'  
            }  
        }  
    }  
</script>  
<style lang="scss">  
    .root {  
        height: 100%;  
        background: #1d1d1d;  
    }  
</style>

页面中，根view .root节点下的子节点包含大量数据，致使元素溢出.root节点，出现如图情况

溢出的部分不显示原本.root的颜色，所以我给.root加了个overflow: scroll;

.root {  
    height: 100%;  
    background: #1d1d1d;  
    overflow: scroll;  
}

颜色倒正常了，但是原本配置的onReachBottom事件不再生效，

这种情况怎么弄啊