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

Question

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

此功能的大部分工作正常。我从列表项中获取 offsetTop 位置，然后在用户返回时将父项滚动到该位置。

但是，这就是问题所在 -> 父元素的 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;
      }
    })
  }

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

listContainer

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

这是计算属性:

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

让这个问题变得奇怪的是，我在列表中越往下，位置越远。这让我觉得计算每个元素的高度有问题，但我也检查了一下，它是准确的。

需要说明的是，问题随着每一行而加速。当我点击第一行的元素时，计算的位置是正确的。第二行，位置偏移了 22px。第三行偏移了 66px。第 4 行偏离 110px 等...

所以问题是每行增加 44PX。我似乎无法弄清楚那部分。

有什么想法吗？

Answer 1

当我遇到这样的问题时，我首先尝试看看它是否是时间问题。如果将 scrollTop 命令放在 setTimeout 中，它会起作用吗？像这样:

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