Tailwind开发的聊天应用页面加载及发新消息时无法自动滚动到底部问题

你当前使用flex-col-reverse仅实现了消息的倒序排列，没有配置滚动锚定逻辑，也缺少页面加载、新消息插入时的滚动触发逻辑，才会出现无法自动定位到底部的问题，可按以下步骤解决：

第一步：调整HTML结构加标识 #

给外层滚动容器和内层消息列表加唯一ID，方便JS获取元素，同时补充滚动相关配置：

<!-- 给外层滚动容器加id，补充滚动相关样式，Tailwind v3+可直接用scroll-smooth类替代style里的scroll-behavior配置 -->
<div id="message-container" class="h-full pb-2 mb-2 pt-0 mt-0 shadow-md overflow-y-auto scroll-smooth" style="overflow-anchor: none;">
  <!-- 给内层消息列表加id -->
  <div id="message-list" class="flex flex-col-reverse justify-end">
    <!-- 原有消息内容保持不变，注意新增消息要插入到这个列表的第一个子节点位置，才能配合flex-col-reverse显示在最底部 -->
  </div>
</div>

第二步：添加页面加载自动滚动逻辑 #

页面首次加载、刷新完成后自动定位到最新消息位置：

window.addEventListener('load', () => {
  const msgContainer = document.getElementById('message-container')
  msgContainer.scrollTop = msgContainer.scrollHeight
})

第三步：添加新消息插入后自动滚动逻辑 #

在你发送新消息、收到新消息并将消息节点插入到message-list的最前面之后，执行以下代码触发滚动：

const msgContainer = document.getElementById('message-container')
msgContainer.scrollTop = msgContainer.scrollHeight

可选优化：避免打扰手动翻消息的用户 #

如果用户已经手动向上滚动查看历史消息，新消息到达时不需要强制滚动到底部，可以加位置判断：

const msgContainer = document.getElementById('message-container')
// 只有当前滚动位置距离底部小于50px时，才自动滚动到底部
const shouldScroll = msgContainer.scrollHeight - msgContainer.scrollTop - msgContainer.clientHeight < 50
if (shouldScroll) {
  msgContainer.scrollTop = msgContainer.scrollHeight
}

内容的提问来源于stack exchange，提问作者ArcticMediaRyan