fix: Try to fix scroll to top problem.

2 files changed, 29 insertions, 38 deletions

diff --git a/FrontEnd/src/app/utilities/useReverseScrollPositionRemember.ts b/FrontEnd/src/app/utilities/useReverseScrollPositionRemember.ts
index 742751eb..42894c20 100644
--- a/FrontEnd/src/app/utilities/useReverseScrollPositionRemember.ts
+++ b/FrontEnd/src/app/utilities/useReverseScrollPositionRemember.ts
@@ -1,9 +1,8 @@
 import React from "react";
 
 let on = false;
-let recordDisabled = false;
 
-function getScrollPosition(): number {
+export function getReverseScrollPosition(): number {
   if (document.documentElement.scrollHeight <= window.innerHeight) {
     return 0;
   } else {
@@ -15,28 +14,24 @@ function getScrollPosition(): number {
   }
 }
 
-let scrollPosition = getScrollPosition();
-
-function scrollToRecordPosition(): void {
+export function scrollToReverseScrollPosition(reversePosition: number): void {
   if (document.documentElement.scrollHeight <= window.innerHeight) return;
   document.documentElement.scrollTop =
-    document.documentElement.scrollHeight - window.innerHeight - scrollPosition;
+    document.documentElement.scrollHeight -
+    window.innerHeight -
+    reversePosition;
 }
 
+let scrollPosition = getReverseScrollPosition();
+
 const scrollListener = (): void => {
-  if (recordDisabled) return;
-  scrollPosition = getScrollPosition();
+  scrollPosition = getReverseScrollPosition();
 };
 
 const resizeObserver = new ResizeObserver(() => {
-  scrollToRecordPosition();
+  scrollToReverseScrollPosition(scrollPosition);
 });
 
-export function setRecordDisabled(disabled: boolean): void {
-  recordDisabled = disabled;
-  if (!disabled) scrollToRecordPosition();
-}
-
 export default function useReverseScrollPositionRemember(): void {
   React.useEffect(() => {
     if (on) return;
diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePagedPostListView.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePagedPostListView.tsx
index ee52f4c0..9c43434d 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelinePagedPostListView.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelinePagedPostListView.tsx
@@ -1,11 +1,14 @@
 import React from "react";
 import { fromEvent } from "rxjs";
-import { filter, throttleTime } from "rxjs/operators";
 
 import { HttpTimelinePostInfo } from "@/http/timeline";
 
+import {
+  getReverseScrollPosition,
+  scrollToReverseScrollPosition,
+} from "@/utilities/useReverseScrollPositionRemember";
+
 import TimelinePostListView from "./TimelinePostListView";
-import { setRecordDisabled } from "@/utilities/useReverseScrollPositionRemember";
 
 export interface TimelinePagedPostListViewProps {
   className?: string;
@@ -27,31 +30,24 @@ const TimelinePagedPostListView: React.FC<TimelinePagedPostListViewProps> = (
       : posts.slice(-lastViewCount);
   }, [posts, lastViewCount]);
 
-  const scrollTopHandler = React.useRef<() => void>();
+  const lastScrollPosition = React.useRef<number | null>(null);
 
   React.useEffect(() => {
-    scrollTopHandler.current = () => {
-      if (lastViewCount < posts.length) {
-        setRecordDisabled(true);
-        setLastViewCount(lastViewCount + 10);
-        setTimeout(() => {
-          setRecordDisabled(false);
-        }, 500);
-      }
-    };
-  }, [lastViewCount, posts]);
-
-  React.useEffect(() => {
-    const subscription = fromEvent(window, "scroll")
-      .pipe(
-        filter(() => window.scrollY === 0),
-        throttleTime(800)
-      )
-      .subscribe(() => {
-        scrollTopHandler.current?.();
+    if (lastScrollPosition.current != null) {
+      scrollToReverseScrollPosition(lastScrollPosition.current);
+      lastScrollPosition.current = null;
+    }
+
+    if (lastViewCount < posts.length) {
+      const subscription = fromEvent(window, "scroll").subscribe(() => {
+        if (window.scrollY === 0) {
+          lastScrollPosition.current = getReverseScrollPosition();
+          setLastViewCount(lastViewCount + 10);
+        }
       });
-    return () => subscription.unsubscribe();
-  }, []);
+      return () => subscription.unsubscribe();
+    }
+  }, [lastViewCount, posts]);
 
   return (
     <TimelinePostListView