滚动到底部； scrollTop = scrollHeight 运行太早？

Posted 2023-03-13

【中文标题】滚动到底部； scrollTop = scrollHeight 运行太早？

【英文标题】：Scrolling to bottom; scrollTop = scrollHeight running too early?

【发布时间】：2019-10-07 18:29:25

【问题描述】：

实时示例：https://angular-txvcna.stackblitz.io/ (Code)。

我有一个“聊天”组件，我希望每次添加消息时让 div 滚动到底部。

我通过将项目推送到数组 (this.messages.push(message)) 来添加新消息，然后尝试滚动到右下角。滚动操作this.chatboxBody.nativeElement.scrollTop = this.chatboxBody.nativeElement.scrollHeight; 似乎在 angular 的生命周期钩子之前，因为scrollHeight 在执行时具有较旧的高度值。

目前我使用setTimeout 来修复它，但它真的感觉像是一条捷径。我该如何解决？ （理想情况下 - 以某种方式订阅更新子组件的钩子）

【参考方案1】：

我有几个想法：

您可以将消息输入更改为设置器，以便在输入消息时设置消息的私有版本并处理组件内的滚动。 （在我个人看来，这是最好的解决方案，因为在使用该组件的每个地方都不必重复如何滚动到底部的逻辑）

    private _message: VivrMessage;
        @Input()
            set message(val: VivrMessage)
        if (val)
            this._message = val;
            this.handleScrolling();
        
    

您可以执行与上述类似的操作，但不是在消息组件中处理滚动，而是有一个输出，然后让父组件完成工作。

【讨论】：

方法1有点帮助，但我必须使用scrollIntoView()，这和滚动到底部不一样。另外，滚动绑定到message 的初始化（如果我想改变它的内容呢？）。方法 2 真的很脏——我已经在使用 Input 设置消息，并在用户单击选项时使用 Output 进行通知——定义另一个 Output 似乎是一个真正的解决方法;-)。谢谢你的回答。

如果你改变了内容，同样的 setter 会被触发。每次父级更改其设置为消息输入的值时，设置器都会执行。