javascript - 如何在滚动期间在侧容器中拥有固定数量的 *ngFor 元素

Question

我用过这个solution 用于在容器 div 内加载大日期。它工作得很好，但是当我向下滚动时它继续在列表中附加元素时，它会变得非常慢。

所以我想更新它以将元素固定在滚动的任何位置。所以我将代码更新为

  pageStart:number = 0;
  pageEnd:number = 50;
  pageHeight:number = 30;
  pageBuffer:number = 50;

onScroll( event, doc )
  {
    const scrollTop = event.target.scrollTop;
    const scrollHeight = event.target.scrollHeight;
    const offsetHeight = event.target.offsetHeight;
    const scrollPosition = scrollTop + offsetHeight;
    const scrollTreshold = scrollHeight - this.pageHeight;
    if( scrollPosition > scrollTreshold ){
      if(this.someLargeData.length>=this.pageEnd){
        this.pageEnd+= this.pageBuffer;
        this.pageStart+= this.pageBuffer; // added this to update pageStart
       }
    }
  }

通过这种方式，我可以在向下滚动时调整内容以包含 50 个元素。现在的问题是如何向上滚动并获取顶部元素，如 this.pageEnd 和 this.pageStart 只会增加。

那么如何在向上滚动时减少 this.pageEnd 和 this.pageStart ？获取顶部元素。

Answer 1

抱歉回复晚了。

如果您知道要加载的元素总数和高度。
您可以使用不可见的 div 元素来强制滚动条。
现在参数将根据滚动方向不断更新。

模板:

<div class="container"> <!-- overflow:auto; -->
  <div class="scroller-spacer" [ngStyle]="spacerStyle"></div>
  <div class="page-container">
    <div *ngFor="..."></div>
  </div>
</div>

脚本:

  pageStart:number  = 0;
  pageEnd:number    = 50;
  pageHeight:number = 30;
  pageBuffer:number = 50;

  onScroll( event, doc )
  {
    const scrollTop = event.target.scrollTop;
    const scrollHeight = event.target.scrollHeight;
    const offsetHeight = event.target.offsetHeight;
    const scrollPosition = scrollTop + offsetHeight;
    const scrollTresholdDown = scrollHeight - this.pageHeight;
    const scrollTresholdUp = scrollHeight - (this.pageHeight - this.pageBuffer);

    if( scrollPosition > scrollTresholdDown ){
      this.pageEnd+= this.pageBuffer;
      this.pageStart+= this.pageBuffer; // added this to update pageStart
    }
    else if( scrollPosition < scrollTresholdUp ){
      this.pageEnd-= this.pageBuffer;
      this.pageStart-= this.pageBuffer; // added this to update pageStart
    }
  }

希望这可以帮助解决您的问题。

GL