Question

我试图在到达下拉列表末尾时在组件类中调用Scroll Event。所以我可以在下拉列表中加载下一组数据，因为列表很大，我只在ngOnInit（）上加载前30条记录。

当用户向下滚动时，我需要触发事件并更新下拉列表，以便它现在可以显示30条以上的记录，并且类似的显示更多滚动条。

我尝试寻找解决方案并实施了此操作：

HTML：

<select (scroll)="scrollHandler($event)" class="custom-select">
      <option *ngFor="let record of records</option>
</select>

组件类：

@HostListener('scroll', ['$event'])
  onScroll(event) {
  console.log("Called on Scroll Event");
}

还是没有运气。我在这里做错了什么？我应该使用Virtual Scroll还是ng-select？ ngbDropDown？有人可以帮我做些笨手笨脚的游戏吗？会很感激的。

谢谢。

Answer 1

您需要检查滚动结束的时间。您可以执行以下操作

@HostListener("window:scroll", ["$event"])
onWindowScroll() {
  //In chrome and some browser scroll is given to body tag
  let pos = (document.documentElement.scrollTop || document.body.scrollTop) + document.documentElement.offsetHeight;
  let max = document.documentElement.scrollHeight;
  // pos/max will give you the distance between scroll bottom and and bottom of screen in percentage.
  if (pos == max) {
    //Call your Method to fetch more records
  }
}

还记得导入Host Listener

在Angular 4中的Select Dropdown结束时滚动事件

1 个答案: