React-Virtuoso实现聊天消息列表反向排列（类column-reverse）问题咨询

你完全不需要用scale(-1)这种hack方式，React-Virtuoso的reversed属性就是专门为聊天这类反向列表场景设计的，只需调整数组顺序和滚动逻辑即可达到预期效果：

1. 配置核心属性与数组顺序 #

• 设置reversed={true}：该属性会让列表从容器底部开始渲染项目，滚动方向自动适配（向上滚动加载历史消息）
• 调整消息数组为新到旧排序：最新消息放在数组开头，旧消息依次往后，这样reversed模式下最新消息会自然显示在列表底部

2. 处理自动滚动与分页 #

保存Virtuoso的ref，在新消息添加后自动滚动到最新项，同时配合endReached加载历史消息：

import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
import { Box } from '@mui/material';

const ChatMessages = () => {
  const virtuosoRef = useRef<VirtuosoHandle>(null);
  const [messages, setMessages] = useState<IMessage[]>([]);

  // 加载历史消息（向上滚动触发）
  const handlePagination = async () => {
    const oldMessages = await fetchHistoricalMessages();
    // 旧消息追加到数组末尾（保持新到旧顺序）
    setMessages(prev => [...prev, ...oldMessages]);
  };

  // 添加新消息
  const addNewMessage = (newMsg: IMessage) => {
    setMessages(prev => [newMsg, ...prev]);
    // 滚动到最新消息（reversed模式下索引0对应数组第一项，即最新消息）
    virtuosoRef.current?.scrollToIndex({ index: 0, align: 'end' });
  };

  return (
    <Box sx={{ p: "12px 16px 8px", height: "100%", width: "100%" }}>
      <Virtuoso
        ref={virtuosoRef}
        reversed={true}
        data={messages}
        endReached={handlePagination}
        className={styles.messagesList}
        itemContent={(_index, message: IMessage) => (
          <MessageCard key={message.id} message={message} />
        )}
        components={{
          EmptyPlaceholder: () => (
            <ListText>No messages yet</ListText>
          )
        }}
      />
    </Box>
  );
};

3. 关键注意事项 #

• 容器高度必须明确：Virtuoso需要固定高度的容器来计算虚拟滚动的可视区域，确保你的Box父元素也设置了有效高度（比如height: 100vh）
• 避免额外反转样式：reversed属性已经处理了布局方向，不需要给列表或消息卡片加scale(-1)，否则会导致文本、图标等元素反转，引发布局混乱
• 滚动对齐参数：scrollToIndex的align: 'end'确保最新消息完全显示在容器底部，符合聊天场景的用户习惯

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