feat: 当上滚增加历史消息时，锁定滚动条位置

shared/hooks/usePrevious.ts

@@ -0,0 +1,11 @@
+import { useEffect, useRef } from 'react';
+
+export function usePrevious<T>(state: T): T | undefined {
+  const ref = useRef<T>();
+
+  useEffect(() => {
+    ref.current = state;
+  });
+
+  return ref.current;
+}

shared/index.tsx

@@ -53,6 +53,7 @@ export { useAsyncFn } from './hooks/useAsyncFn';
 export { useAsyncRequest } from './hooks/useAsyncRequest';
 export { useDebounce } from './hooks/useDebounce';
 export { useMountedState } from './hooks/useMountedState';
+export { usePrevious } from './hooks/usePrevious';
 export { useRafState } from './hooks/useRafState';
 export { useUpdateRef } from './hooks/useUpdateRef';
 

web/src/components/ChatBox/ChatMessageList/VirtualizedList.tsx

@@ -2,13 +2,20 @@ import DynamicSizeList, {
   OnScrollInfo,
 } from '@/components/DynamicVirtualizedList/DynamicSizeList';
 import { Divider } from 'antd';
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, {
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import {
   ChatMessage,
   getMessageTimeDiff,
   shouldShowMessageTime,
   t,
+  usePrevious,
   useUpdateRef,
 } from 'tailchat-shared';
 import { messageReverseItemId } from './const';
@@ -51,6 +58,7 @@ export const VirtualizedMessageList: React.FC<VirtualizedMessageListProps> =
     const listRef = useRef<DynamicSizeList>(null);
     const postListRef = useRef<HTMLDivElement>(null);
     const [isBottom, setIsBottom] = useState(true);
+    useLockScroll(props.messages, listRef);
 
     const handleScroll = (info: OnScrollInfo) => {
       const {
@@ -110,7 +118,7 @@ export const VirtualizedMessageList: React.FC<VirtualizedMessageListProps> =
     /**
      * 渲染列表元素
      */
-    const renderRow = ({ data, itemId }: any) => {
+    const renderRow = ({ itemId }: any) => {
       if (itemId === messageReverseItemId.OLDER_MESSAGES_LOADER) {
         return (
           <div key={itemId} className="text-center text-gray-400">
@@ -208,3 +216,29 @@ export const VirtualizedMessageList: React.FC<VirtualizedMessageListProps> =
     );
   });
 VirtualizedMessageList.displayName = 'VirtualizedMessageList';
+
+/**
+ * 当增加历史信息时锁定滚动条位置
+ */
+function useLockScroll(
+  messages: ChatMessage[],
+  listRef: React.RefObject<DynamicSizeList>
+) {
+  const previousMessages = usePrevious(messages);
+  const previousScrollHeight = usePrevious(
+    listRef.current?._outerRef?.scrollHeight
+  );
+  useLayoutEffect(() => {
+    if (previousMessages && messages[0]._id !== previousMessages[0]._id) {
+      // 增加了历史消息
+      if (listRef.current?._outerRef) {
+        // 能够拿到容器
+        listRef.current.scrollTo(
+          listRef.current._outerRef.scrollTop +
+            listRef.current._outerRef.scrollHeight -
+            (previousScrollHeight || 0)
+        );
+      }
+    }
+  }, [messages.length, previousMessages?.length]);
+}