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

问题描述

我已使用此在容器div中加载大日期。它工作得很好但是当我向下滚动时它继续在列表中追加元素时变得过慢。

I have used this solution for loading large date inside container div. It works perfectly but It become over slow when it keep on appending element in the list as I scroll down.

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

So I want to update it to keep the elements fixed at any position on scroll. So I updated code as

  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 只是在增加。

By this way I can adjust content to have 50 elements as I scroll down.Now the problem is how to scroll up and get top elements as this.pageEnd and this.pageStart is only increasing.

那么如何减少 this.pageEnd 和 this.pageStart ？获得最重要的元素。

So how to decrease this.pageEnd and this.pageStart on scroll up ?? to get top elements.

推荐答案

对于迟到的答案感到抱歉。

Sorry for the late answer.

如果您知道要加载的元素总数和高度。

您可以使用不可见的div元素强制滚动条。

现在参数将继续更新与滚动方向的关系。

If you know the total of the elements you want to load and the height.
You can use an invisible div element to force a scrollbar.
Now the parameters will keep updating in relation to the scroll direction.

模板：

<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
    }
  }

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

I hope this could help with your problem.

gl

这篇关于如何在滚动期间在侧容器中有固定数量的* ngFor元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！