Javascript 如何在滚动期间在侧边容器中固定*ngFor的元素数

我用它在container 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？？获取顶级元素。

很抱歉回答得太晚

如果您知道要加载的图元总数和高度。 可以使用不可见的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
    }
  }

我希望这能帮助解决你的问题

德国劳埃德船级社