如何在 Angular 中动态滚动 <textarea>？

Posted 2023-05-07

【中文标题】如何在 Angular 中动态滚动 <textarea>？

【英文标题】：How do I dynamically scroll a <textarea> in Angular?

【发布时间】：2020-07-23 17:28:33

【问题描述】：

我正在编写一个聊天应用程序，其中将新消息添加到<textarea> 的底部。我希望 textarea 滚动到底部，因为聊天日志很大。

我该如何做到这一点？

我尝试了以下操作，scrollTop 属性没有滚动我的textarea。

<textarea #chat class="form-control" rows=20 disabled [(ngModel)]="output" [scrollTop]="scroll" name="chatMessages"></textarea>

但是，this.scroll=9999 不会将 scrollTop 的绑定更改为值 9999。我控制台日志this.scroll，它的值是9999，但是我的textarea没有到底部！

我需要帮助，谢谢！

【问题讨论】：

看看这个答案***.com/questions/35232731/…希望对你有帮助。

【参考方案1】：

我想出了一个更简单的方法，它会自动滚动到底部，即使ngModel 正在实时更改（聊天）。只需要将文本区域的scrollTop property 与其当前的scrollHeight 映射：

<textarea [(ngModel)]="..." #textarea [scrollTop]="textarea.scrollHeight"></textarea>