为什么设置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;
      }
    })
  }

但是当我检查父的计算出的scrollTop值时

listContainer

在Chrome DevTools中，这始终是错误的，并且我可以看到屏幕的滚动位置不正确，但是我的控制台语句告诉我它的设置正确。

这是计算出的属性：

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

使这个问题变得怪异的是，我走得越远，排名越靠后。 这使我认为计算每个元素的高度存在问题，但我也对此进行了检查，它是准确的。

只是要清楚， 问题随着每一行而加速。 当我单击第一行中的元素时，计算位置是正确的。 第二行位置偏离了22px。 第三行偏离了66px。 第四行关闭了110px等...

因此，每行的问题都在增加44PX。 我似乎无法弄清楚。

有任何想法吗？

Answer 1

当我遇到这样的问题时，我首先尝试看看这是否是时间问题。 如果将scrollTop命令放在setTimeout内，是否可以工作？ 像这样：

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