ngx-infinite-scroll 滚动事件不会停止触发答案

【问题标题】：ngx-infinite-scroll scrolled event won't stop firingngx-infinite-scroll 滚动事件不会停止触发
【发布时间】：2020-02-08 01:20:00
【问题描述】：

我用 ngx-infinite-scroll 实现了无限滚动。当用户到达可滚动元素的底部（具有固定高度）时，“滚动”事件将触发并调用 API 以将更多项目加载到该元素中。

问题是，当我显示更多数据时，滚动级别会自动更改，事件会再次触发。我只是希望这个事件由用户手动触发。当我加载更多数据时，有没有办法阻止滚动级别？

   <div
        class="project-feed-container"
        infiniteScroll
        [infiniteScrollDistance]="2"
        [infiniteScrollThrottle]="50"
        [alwaysCallback]="true"
        [scrollWindow]="false"
        (scrolled)="onScroll()"
    >

       <!-- *ngFor with content -->

    </div>

【问题讨论】：

您的 API 在响应中提供了多少个对象？我认为发生这种情况是因为响应不包含足够的对象来将滚动位置增加到阈值以上。你能分享更多关于逻辑的细节或在 Stackblitz 上创建一个例子吗？
API 提供了另外 8 个要显示的对象。它们是按行显示的 2 个对象。每个对象高度约为视口的 45%。因此，每次加载更多对象时，都足以将滚动位置增加到阈值以上。这实际上是问题的根源，因为滚动位置在收到日期后会增加，从而触发新请求。我今天无法提供 stackblitz 演示。本周末将尝试这样做。
我一直在玩无限滚动，我想我可以在这里重现您的问题：stackblitz.com/edit/ngx-infinite-scroll-xnhwl1。我将发布一个可能的解决方案，以防止在将新内容添加到数组时加载。
我通过设置 css 属性“溢出锚：无”来修复它。来源：stackoverflow.com/a/48585403/1816277

标签： angular infinite-scroll

【解决方案1】：

以下是 API 响应触发新请求的可能解决方案。它基于几个标志来检查应用程序是否可以执行新请求。

canLoad。它控制应用程序是否可以从 API 加载新项目。

pendingLoad。保留将在下一次轮询迭代时触发的排队操作。

// NgOnInit to set a time interval to check status. Adjust timing to your need. 
ngOnInit() {
  setInterval( () => {
    this.canLoad = true;
    if ( this.pendingLoad ) {
      this.onScrollDown();
    }
  }, 2000);
}

然后，当触发滚动功能时，应用应检查是否允许调用 API 并添加新元素。

onScrollDown() {
    if ( this.canLoad ) {
      this.canLoad = false;
      this.pendingLoad = false;

      // Call API here
      this.appendItems(0, apiData);
    } else {
      this.pendingLoad = true;
    }
  }

这是StackBlitz link 的演示。

【讨论】：

嗨米克尔。我回来找你有点晚了。您的解决方案有效。 Moltes gracies！

【解决方案2】：

您可以在标签中使用可选输入 [infiniteScrollDisabled] 并通过您的打字稿设置布尔值。

 <div
        class="project-feed-container"
        infiniteScroll
        [infiniteScrollDistance]="2"
        [infiniteScrollThrottle]="50"
        [infiniteScrollDisabled]="scrollCheck"
        [alwaysCallback]="true"
        [scrollWindow]="false"
        (scrolled)="onScroll()"
    >
    </div>

检查 ts 文件中所需的适当条件，并将布尔值设置为 true

scrollCheck: boolean = false;

onScrollDown() {
    if(condition){
       this.scrollCheck=true;
    }
    //other code
}

【讨论】：