Javascript 如何在列表的特定位置滚动时获取数据属性

初始创建的空li基于宽度为“500”高度为“600”的图像总数。 TODO-滚动时需要识别特定的图像数据attr id，并请求图像API调用并在空li中呈现图像。 例如，如果滚动到第五个空列表位置，则需要调用API。请帮帮我

<div class="imageWrap"(scroll) = "onScroll($event,imageEl)">
  <ul>
  <li #imageEl * ngFor="let data of images; let i = index"
  [attr.data-image-id] = "image.id" >
    <div><img src ="{{data.img}}" width = "500" height = "600" /> </div>
  </li>
  </ul>
  </div>

@HostListener('scroll', ['$event'])
onScroll(event: any, indexI ?) {
  let els = document.getElementsByTagName("li");
  let offsetHeight = event.target['offsetHeight'];
  let scrollTop = event.target['scrollTop'];
  let scrollHeight = event.target['scrollHeight'];
  this.getImageById(id);
}
getImageById(id){
  this.apiService.getimageData(id).subscribe(images => this.images = images);
}

@HostListener（'滚动'，['$event']））
onScroll（事件：是否有，indexI？）{
设els=document.getElementsByTagName（“li”）；
let offsetHeight=event.target['offsetHeight']；
让scrollTop=event.target['scrollTop']；
让scrollHeight=event.target['scrollHeight']；
这个.getImageById（id）；
}
getImageById（id）{
this.apiService.getimageData（id）.subscribe（images=>this.images=images）；
}