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

我有一个滚动列表中的项目很长的列表。此列表正在使用Angular 4中的* ngFor创建。我尝试创建一个功能，当用户从详细信息视图导航回列表时，滚动到列表的正确位置。为什么设置scrollTop无法设置正确的位置？

此功能的大部分工作正常。我从列表项获取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; 
     } 
    }) 
    }

但是当我检查在Chrome DevTools父

listContainer

的计算scrollTop的值，它总是错的，我可以看到不正确的滚动位置屏幕，但我的控制台声明告诉我它已正确设置。

这里的计算性能：

下面是从上面的代码登录控制台：

是什么让这个问题奇怪的是，我越往前走下来的名单，进一步的位置是关闭。这让我觉得计算每个元素的高度是有问题的，但我也检查了这一点，它是准确的。

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

所以这个问题正在增加44PX与每一行。我似乎无法弄清楚这件事。

任何想法？

来源

2017-06-16 calbear47

当我遇到像这样的问题时，我首先试着看看它是否是时机问题。如果您将scrollTop命令放入setTimeout中，它会起作用吗？像这样：

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

来源

2017-06-17 00:55:52

感谢您的输入！我认为这可能也是如此，但最终在今天上午解决了这个问题。这是列表中每个项目的高度渲染问题。 height属性返回浏览器开发工具中的期望值，但在页面上的行为不同。我仍然对此有点困惑，但是一旦我深入了解为什么，我会添加一个解决方案...... – calbear47

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

回答

相关问题