--- theme: cyanosis --- ## 背景在使用ai助手聊天的时候，每当聊天框中展示新消息，需要将聊天框滚动到底部，展示最新信息。跟普通聊天工具相比，ai助手聊天使用的是流响应，消息体会随着ai模型的输出不断变化。 ## 实现思路 1. 监听消息体的变化，频繁的进行javascript调用滚动到底部（极度不推荐，一听就有性能问题）。 2. 参考Poe的聊天框实现方式，通过改变消息列表的排列方向来实现 **（推荐）**。 ## 实现的功能 1. 当发送新消息时，滚动到聊天框底部 ![GIF 2024-3-19 16-53-13.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8a858fa4edab489da0979d1037b99a85~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=477\&h=537\&s=105735\&e=gif\&f=25\&b=ffffff) 这一点比较简单，在发送的时候滚动到底部 **关键代码：** ```javascript sendMessage() { this.list.push({ id: this.list.length + 1, message: this.message }); // 平滑滚动到.container的底部 this.$nextTick(() => { document.querySelector('.container').scrollTop = 0 }) }, ``` 2. 在聊天框底部接受消息体期间，滚动条一直处于最底部 ![GIF 2024-3-19 16-54-00.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/78011046bf804ca188b6d61d64be7c6b~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=477\&h=537\&s=59186\&e=gif\&f=46\&b=ffffff) **注意：这里是实现方式的关键：** 首先，需要将 **.box** 的样式设置为： ```css display: flex; flex-direction: column-reverse; ``` 效果对比： ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8e137cbbbee341c18c1bca1f2e56dae1~tplv-k3u1fbpfcp-watermark.image#?w=1440\&h=529\&s=95380\&e=png\&b=fcfcfc) 针对数据较少时的空白块，我们通过添加 **.empty-box** 元素来进行填充，给元素添加以下样式，在有空白时撑开剩余空间，数据多时高度为0。 ```css flex-grow: 1; ``` ## 代码实现 ### demo演示： [jcode](https://code.juejin.cn/pen/7347977375147425818) ### 组件代码： ```jsx ```