scrollTopの設定が正しい位置を設定できないのはなぜですか？

Question

私はスクロール可能なリストに項目の長いリストを持っています。このリストは、Angular 4の* ngForで作成されています。ユーザーが詳細ビューからリストに戻ったときに、リストの正しい位置にスクロールする機能を作成しようとしています。

この機能のほとんどは正常に動作します。私は、リスト項目からoffsetTopの位置を取得し、ユーザーが戻るときにこの位置に親をスクロールしています。

ただし、ここに問題があります - >親要素のscrollTopプロパティは決して正確ではありません。明示的に設定しても

私はここで観察可能なストリームでそれを設定しています：

ngAfterViewInit(){ 

    let facilitiesListPositionStream$ = Observable.combineLatest(this.facilities$, this.scrollPosition$); 

    facilitiesListPositionStream$.subscribe((values)=>{ 
     console.log(values[1]); 
     if(values[1] > 0){ 
     console.log(values[1]); **// Correct position value here** 
     this.listContainer.nativeElement.scrollTop = values[1]; 
     console.log(this.listContainer.nativeElement.scrollTop);**// Correct position value here** 
     }else{ 
     this.listContainer.nativeElement.scrollTop = 0; 
     } 
    }) 
    } 

しかし、私はクロームデベロッパーツールで親

listContainer

の計算scrollTopスプライト値をチェックするとき、それは常に間違っていると私は間違ってスクロール位置を見ることができます画面はまだ、私のコンソールステートメントは、それが正しく設定されていることを伝えている。ここで

は、計算されたプロパティです。この問題は奇妙になり何

遠く、私はリストを下に移動し、さらに位置がオフになっていることである：

そしてここでは、上記のコードからログインしてコンソールです。これは、各要素の高さを計算することに問題があると私に思いますが、私もそれをチェックし、正確です。

明らかに、各行で問題が加速します。 最初の行の要素をクリックすると、位置の計算が正しく行われます。 2行目、位置は22ピクセルでオフです。 3番目の行は66ピクセルだけオフになっています。 4行目が110pxなどでオフになっています。

問題はすべての行で44PXによって増加しています。私はそれを理解することができない。

アイデア？

Answer 1

このような問題が発生したときは、まずタイミングの問題であるかどうかを確認してみてください。あなたがsetTimeoutの中にscrollTopコマンドを置くとうまくいくのですか？このように：

window.setTimeout(() => { 
    this.listContainer.nativeElement.scrollTop = values[1]; 
}, 0)