为什么设置scrollTop无法设置正确的位置？

Question

我在可滚动列表中有很长的项目列表。此列表是在Angular 4中使用* ngFor创建的。我正在尝试创建一个功能，当用户从详细视图导航回列表时，该功能会滚动到列表的正确位置。

此功能大部分都可以正常使用。我从列表项中获取了offsetTop位置，然后在用户返回时将父级滚动到此位置。

然而，这是问题 - ＆gt;父元素的scrollTop属性永远不准确。即使在明确设置之后。

我在这里设置一个Observable流：

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

但是当我在Chrome DevTools中检查父

listContainer

的计算scrollTop值时，它总是错误的，我可以看到屏幕的错误滚动位置，但我的控制台语句告诉我它设置正确。

这是计算出的属性：

这是从上面的代码记录的控制台：

让这个问题变得奇怪的是，我走得更远，位置越远。这让我觉得计算每个元素的高度存在问题，但我也检查了它，并且它是准确的。

为了清楚起见，每行都会加速问题。 当我单击第一行中的元素时，计算位置是正确的。第二排，位置偏离22px。 第三排是66px。 第四排是110px等...

因此每行44PX的问题都在增加。我似乎无法想象那件事。

有什么想法吗？

Answer 1

当我遇到这样的问题时，我首先试着看看它是否是时间问题。如果将scrollTop命令放在setTimeout中，它是否有效？像这样：

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