嘿，这个需求我在做聊天类项目时刚好碰到过，分享几个成熟的方案给你，完全能实现类似WhatsApp/Messenger的效果👇

核心思路 #

要让聊天气泡从容器底部开始排列，核心是让聊天容器的内容默认靠底部对齐，新消息直接追加到列表末尾，同时处理滚动逻辑确保最新消息自动可见。

方案1：CSS Flexbox（最常用，推荐） #

这是最直观且兼容性好的实现方式，不需要反转消息顺序，完全按时间正序添加即可：

容器样式 #

.chat-container {
  /* 固定容器高度，也可以用vh单位适配屏幕 */
  height: 500px;
  width: 100%;
  /* 开启Flex布局 */
  display: flex;
  flex-direction: column;
  /* 让内容靠容器底部对齐 */
  justify-content: flex-end;
  /* 内容超出时显示垂直滚动条 */
  overflow-y: auto;
  padding: 12px;
  box-sizing: border-box;
  background-color: #f5f5f5;
}

消息气泡样式 #

给消息气泡设置顶部间距，避免底部出现多余留白：

.chat-bubble {
  max-width: 70%;
  padding: 8px 12px;
  border-radius: 18px;
  margin-top: 8px;
}
/* 区分自己和对方的消息 */
.chat-bubble.self {
  align-self: flex-end;
  background-color: #0084ff;
  color: white;
}
.chat-bubble.other {
  align-self: flex-start;
  background-color: white;
}

效果说明 #

当消息数量不多时，所有气泡会靠容器底部排列；当消息超过容器高度时，滚动条自动出现，旧消息停留在容器上方，新消息始终追加在底部。

方案2：CSS Grid（备选方案） #

如果你更习惯用Grid布局，也能轻松实现：

.chat-container {
  height: 500px;
  width: 100%;
  display: grid;
  /* 让内容靠底部对齐 */
  align-content: end;
  overflow-y: auto;
  padding: 12px;
  box-sizing: border-box;
  background-color: #f5f5f5;
}

消息气泡的样式和Flex方案一致，原理也相同，只是布局方式换成了Grid。

关键补充：新消息自动滚动到底部 #

上面的布局解决了从底部排列的问题，但如果用户之前滚动查看过旧消息，新消息进来时需要自动滚动到底部才能看到。这一步需要用JavaScript处理：

原生JS实现 #

每次添加新消息后，执行以下代码：

const chatContainer = document.querySelector('.chat-container');
// 直接滚动到底部
chatContainer.scrollTop = chatContainer.scrollHeight;

// 或者用平滑滚动（体验更好）
chatContainer.scrollTo({
  top: chatContainer.scrollHeight,
  behavior: 'smooth'
});

框架适配（React/Vue） #

如果你用React，要在DOM更新完成后执行滚动，比如用useEffect监听消息列表的变化：

useEffect(() => {
  const chatContainer = document.querySelector('.chat-container');
  chatContainer.scrollTop = chatContainer.scrollHeight;
}, [messages]); // messages是你的消息数组

Vue则可以用nextTick确保DOM更新后执行：

methods: {
  addMessage() {
    // 添加新消息的逻辑
    this.messages.push(newMsg);
    this.$nextTick(() => {
      const chatContainer = this.$refs.chatContainer;
      chatContainer.scrollTop = chatContainer.scrollHeight;
    });
  }
}

小细节优化 #

• 避免消息气泡底部留白：用margin-top代替margin-bottom，确保最后一条消息和容器底部没有多余间距。
• 自定义滚动条：可以美化滚动条样式，让它更贴合聊天应用的风格：

.chat-container::-webkit-scrollbar {
  width: 6px;
}
.chat-container::-webkit-scrollbar-track {
  background: transparent;
}
.chat-container::-webkit-scrollbar-thumb {
  background: #ddd;
  border-radius: 3px;
}
.chat-container::-webkit-scrollbar-thumb:hover {
  background: #ccc;
}

这些方案都是经过实际项目验证的，和WhatsApp、Messenger的实现逻辑一致，你可以根据自己的技术栈直接套用～

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