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

问题描述

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

我在Angular 2 中的代码之前和之后打印变量滚动到底部（聊天样式）以查看可能发生的情况以及使用此代码：

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

另外，我看到offsetHeightdiv的值为400，即scrollHeight减去scrollTopnew，但我不知道如何管理。

版本是：

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

任何想法？谢谢

标签： javascriptangular

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

问题描述

解决方案

推荐阅读