スクロール時にサイドコンテナの* ngForの要素数を固定する方法

Question

コンテナdiv内に大きな日付をロードするためにこのsolutionを使用しました。それは完璧に動作しますが、スクロールダウンするとリスト内に要素を追加し続けると、遅くなります。

私は要素をスクロールの任意の位置に固定するように更新したいと思います。だから私は唯一増加している私は問題がスクロールアップとthis.pageEndとthis.pageStartなどトップ要素を取得する方法であるdown.Nowスクロールすると50個の要素を持っているコンテンツを調整することができますこの方法では

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

ように、コードを更新しました。

、どのようにスクロールアップに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