fix: auto scroll issue on the replay

HuolalaTech · Dec 24, 2024 · e127b47 · e127b47
1 parent 7eef3dd
commit e127b47
Showing 1 changed file with 10 additions and 9 deletions.
diff --git a/src/pages/Replay/PluginPanel/components/ConsolePanel/index.tsx b/src/pages/Replay/PluginPanel/components/ConsolePanel/index.tsx
@@ -49,23 +49,24 @@ export const ConsolePanel = memo(() => {
     });
   }, [consoleMsg, autoScroll]);
 
+  const currentScrollTop = useRef<number>(0);
   useEffect(() => {
     const parent = panelRef.current?.parentElement;
     if (!parent) return;
 
-    let scrollY = 0;
-    const fn = () => {
-      const value = parent.scrollTop;
-      if (value < scrollY) {
+    const handleScroll = () => {
+      const direction =
+        parent.scrollTop > currentScrollTop.current ? 'down' : 'up';
+      currentScrollTop.current = parent.scrollTop;
+
+      if (direction === 'up') {
         setAutoScroll(false);
-      } else {
-        setAutoScroll(true);
+        return;
       }
-      scrollY = value;
     };
-    parent.addEventListener('scroll', fn);
+    parent.addEventListener('scroll', handleScroll);
     return () => {
-      parent.removeEventListener('scroll', fn);
+      parent.removeEventListener('scroll', handleScroll);
     };
   }, [setAutoScroll]);