js实现滚动条来动态加载数据

data:Array<any>      //展示的数据
allData:Array<any>  //全部的数据
size:number = 10     //每次动态加载的条数

scrollOnChange(){
    //展示的数据高度
    let dataHeight = $('#ul').scrollHeight
    //ul下拉框高度
    let ulHeight = $('#ul').offsetHeight
    //向上滚出可视区域的距离
    let top = $('#ul').scrollTop
    //动态加载数据
    if(dataHeight <= ulHeight+top){
        let dataSize =  this.data.length + this.size
        this.data.push(...this.allData.slice(this.data.length,dataSize))
    }
}

<div>
    <ul id="ul" (scroll)="scrollOnChange()">
        <li *ngFor="let d of data">{{d}}</li>
　　 </ul>
<div>