diff --git a/Touchkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/index.tsx b/Touchkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/index.tsx index c6a78cb8..c534fe9d 100644 --- a/Touchkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/index.tsx +++ b/Touchkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/index.tsx @@ -150,6 +150,7 @@ type GroupRenderItem = { const MessageRecord: React.FC = ({ contract }) => { const messagesEndRef = useRef(null); + const messagesContainerRef = useRef(null); // 右键菜单状态 const [contextMenu, setContextMenu] = useState({ visible: false, @@ -171,6 +172,8 @@ const MessageRecord: React.FC = ({ contract }) => { const isLoadingData = useWeChatStore(state => state.isLoadingData); const showCheckbox = useWeChatStore(state => state.showCheckbox); const prevMessagesRef = useRef(currentMessages); + const isLoadingMoreRef = useRef(false); + const scrollPositionRef = useRef(0); const updateShowCheckbox = useWeChatStore(state => state.updateShowCheckbox); const updateEnterModule = useWeChatStore(state => state.updateEnterModule); const currentCustomer = useCustomerStore(state => @@ -460,7 +463,10 @@ const MessageRecord: React.FC = ({ contract }) => { } }); - if (currentMessages.length > prevLength && !hasVideoStateChange) { + // 如果正在加载更早的消息,不自动滚动到底部 + if (isLoadingMoreRef.current && currentMessages.length > prevLength) { + // 不滚动,等待加载完成后在另一个 useEffect 中恢复滚动位置 + } else if (currentMessages.length > prevLength && !hasVideoStateChange) { scrollToBottom(); } else if (isLoadingData && !hasVideoStateChange) { scrollToBottom(); @@ -470,6 +476,22 @@ const MessageRecord: React.FC = ({ contract }) => { prevMessagesRef.current = currentMessages; }, [currentMessages, isLoadingData]); + // 监听加载状态,当加载完成时恢复滚动位置 + useEffect(() => { + if (!messagesLoading && isLoadingMoreRef.current) { + // 等待DOM更新后恢复滚动位置 + requestAnimationFrame(() => { + const container = messagesContainerRef.current; + if (container) { + const scrollHeight = container.scrollHeight; + const newScrollTop = scrollHeight - scrollPositionRef.current; + container.scrollTop = newScrollTop; + } + isLoadingMoreRef.current = false; + }); + } + }, [messagesLoading]); + const scrollToBottom = () => { messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }); }; @@ -762,6 +784,12 @@ const MessageRecord: React.FC = ({ contract }) => { if (messagesLoading || !currentMessagesHasMore) { return; } + // 保存当前滚动位置(距离底部的距离) + const container = messagesContainerRef.current; + if (container) { + scrollPositionRef.current = container.scrollHeight - container.scrollTop; + isLoadingMoreRef.current = true; + } loadChatMessages(false); }; @@ -840,7 +868,7 @@ const MessageRecord: React.FC = ({ contract }) => { }; return ( -
+
loadMoreMessages()}