当它不起作用时如何管理滚动到底部？答案

【问题标题】：How to manage scroll to bottom when it does not works?当它不起作用时如何管理滚动到底部？
【发布时间】：2021-02-23 04:26:58
【问题描述】：

我知道这是一个常见问题，但我无法通过其他回复来解决它。我正在使用 Angular 开发一个聊天组件，并且像往常一样，当聊天窗口启动和用户发送消息时，我会向下滚动。我在这里实现了代码：Angular 2 Scroll to bottom (Chat style)，但滚动条保持在主体末端的上方，如下图所示：

我在Angular 2 Scroll to bottom (Chat style) 中的代码之前和之后打印变量以查看会发生什么以及使用此代码：

scrollToBottom(): void {
console.log("ScrollToBottom")
try {
  console.log("scrollTop "+this.myScrollContainer.nativeElement.scrollTop)
  console.log("scrollHeight "+this.myScrollContainer.nativeElement.scrollHeight)
  this.myScrollContainer.nativeElement.scrollTop = this.myScrollContainer.nativeElement.scrollHeight;
  console.log("DONE")
  console.log("scrollTopnew "+this.myScrollContainer.nativeElement.scrollTop)
  console.log("scrollHeightnew "+this.myScrollContainer.nativeElement.scrollHeight)
} catch (err) { console.log(err) }

}

我明白了：

scrollTop 0
scrollHeight 1539
DONE
scrollTopnew 1139
scrollHeightnew 1539

另外我看到div的offsetHeight是400，也就是scrollHeight减去scrollTopnew但是不知道怎么管理。

版本是：

Angular CLI：10.1.4
节点：14.8.0
操作系统：linux x64
角度：10.1.4

¿有什么想法吗？谢谢

【问题讨论】：

标签： javascript angular

【解决方案1】：

scrollHeight 指向组件的顶部，你必须给它加上组件高度

【讨论】：

我已经做到了，甚至设置为：this.myScrollContainer.nativeElement.scrollTop = 1539 来测试它。但是 scoolTop 似乎有一个我可以超过的最大值