perf(前端): 消息窗口: 加载更多之后的滚动条位置

src/views/Conversations/Online/MessagesList.jsx

@@ -21,10 +21,16 @@ const MessagesList = ({ messages, handlePreview, reference, longListLoading, get
     return () => '';
   }, [focusMsg])
 
-
+  const [previousScrollHeight, setPreviousScrollHeight] = useState(0);
   const scrollToBottom = (force = false) => {
     if (reference.current && (shouldScrollBottom || force)) {
       reference.current.scrollTop = reference.current.scrollHeight;
+    } else if (shouldScrollBottom === false) {
+      requestAnimationFrame(() => {
+        if (reference.current) {
+          reference.current.scrollTop = reference.current.scrollHeight - previousScrollHeight
+        }
+      })
     }
   };
 
@@ -39,6 +45,7 @@ const MessagesList = ({ messages, handlePreview, reference, longListLoading, get
   useEffect(scrollToBottom, [messages]);
 
   const onLoadMore = async () => {
+    setPreviousScrollHeight(reference.current?.scrollHeight || 0);
     await getMoreMessages();
   };
   // eslint-disable-next-line react/display-name
@@ -51,8 +58,8 @@ const MessagesList = ({ messages, handlePreview, reference, longListLoading, get
   ));
 
   return (
-    <div className='relative h-full overflow-y-auto overflow-x-hidden flex flex-1'>
-      <div ref={reference} className='relative overflow-y-auto overflow-x-hidden block flex-1'>
+    <div className='relative h-full overflow-x-hidden flex flex-1'>
+      <div ref={reference} className='relative overflow-y-auto overflow-x-hidden block flex-1' key={'msg-list'}>
         {loadNextPage && messages.length > 0 && (
           <div className='text-center pt-3 mb-3 h-8 leading-8 '>
             {!longListLoading ? (