fix: Don't know this is No.which attemp to fix scroll to top bug.

4 files changed, 98 insertions, 23 deletions

diff --git a/FrontEnd/src/app/utilities/useReverseScrollPositionRemember.ts b/FrontEnd/src/app/utilities/useReverseScrollPositionRemember.ts
index c86ffa74..a97d7660 100644
--- a/FrontEnd/src/app/utilities/useReverseScrollPositionRemember.ts
+++ b/FrontEnd/src/app/utilities/useReverseScrollPositionRemember.ts
@@ -2,6 +2,10 @@ import React from "react";
 
 let on = false;
 
+let reverseScrollPosition = getReverseScrollPosition();
+let reverseScrollToPosition: number | null = null;
+let lastScrollPosition = window.scrollY;
+
 export function getReverseScrollPosition(): number {
   if (document.documentElement.scrollHeight <= window.innerHeight) {
     return 0;
@@ -20,22 +24,47 @@ export function scrollToReverseScrollPosition(reversePosition: number): void {
   const old = document.documentElement.style.scrollBehavior;
   document.documentElement.style.scrollBehavior = "auto";
 
-  window.scrollTo(
-    0,
-    document.documentElement.scrollHeight - window.innerHeight - reversePosition
-  );
+  const newPosition =
+    document.documentElement.scrollHeight -
+    window.innerHeight -
+    reversePosition;
+
+  reverseScrollToPosition = newPosition;
+
+  window.scrollTo(0, newPosition);
 
   document.documentElement.style.scrollBehavior = old;
 }
 
-let scrollPosition = getReverseScrollPosition();
-
 const scrollListener = (): void => {
-  scrollPosition = getReverseScrollPosition();
+  if (
+    reverseScrollToPosition != null &&
+    Math.abs(window.scrollY - reverseScrollToPosition) > 50
+  ) {
+    console.log(
+      `Reverse scroll position coerce. Required: ${reverseScrollToPosition}. Actual: ${window.scrollY}.`
+    );
+    scrollToReverseScrollPosition(reverseScrollPosition);
+    return;
+  }
+  if (
+    reverseScrollToPosition == null &&
+    Math.abs(window.scrollY - lastScrollPosition) > 1000
+  ) {
+    console.log(
+      `Scroll jump detected. New: ${window.scrollY}. Old: ${lastScrollPosition}.`
+    );
+    scrollToReverseScrollPosition(reverseScrollPosition);
+    return;
+  }
+
+  reverseScrollToPosition = null;
+  lastScrollPosition = window.scrollY;
+  reverseScrollPosition = getReverseScrollPosition();
 };
 
 const resizeObserver = new ResizeObserver(() => {
-  scrollToReverseScrollPosition(scrollPosition);
+  scrollToReverseScrollPosition(reverseScrollPosition);
 });
 
 export default function useReverseScrollPositionRemember(): void {
diff --git a/FrontEnd/src/app/utilities/useScrollToTop.ts b/FrontEnd/src/app/utilities/useScrollToTop.ts
new file mode 100644
index 00000000..da63cb0a
--- /dev/null
+++ b/FrontEnd/src/app/utilities/useScrollToTop.ts
@@ -0,0 +1,49 @@
+import React from "react";
+import { fromEvent } from "rxjs";
+import { filter, throttleTime, tap } from "rxjs/operators";
+
+function useScrollToTop(
+  handler: () => void,
+  enable = true,
+  option = {
+    maxOffset: 50,
+    throttle: 1000,
+  }
+): void {
+  const handlerRef = React.useRef<(() => void) | null>(null);
+
+  React.useEffect(() => {
+    handlerRef.current = handler;
+
+    return () => {
+      handlerRef.current = null;
+    };
+  }, [handler]);
+
+  React.useEffect(() => {
+    const subscription = fromEvent(window, "scroll")
+      .pipe(
+        tap(() => {
+          console.log(
+            `Scroll event fired: ${window.scrollY}, time: ${Date.now()}.`
+          );
+        }),
+        filter(() => {
+          return window.scrollY <= option.maxOffset;
+        }),
+        throttleTime(option.throttle)
+      )
+      .subscribe(() => {
+        if (enable) {
+          console.log(`Fire scroll to top event, time: ${Date.now()}.`);
+          handlerRef.current?.();
+        }
+      });
+
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, [enable, option.maxOffset, option.throttle]);
+}
+
+export default useScrollToTop;
diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePagedPostListView.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePagedPostListView.tsx
index 69fd9207..37f02a82 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelinePagedPostListView.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelinePagedPostListView.tsx
@@ -1,8 +1,9 @@
 import React from "react";
-import { fromEvent } from "rxjs";
 
 import { HttpTimelinePostInfo } from "@/http/timeline";
 
+import useScrollToTop from "@/utilities/useScrollToTop";
+
 import TimelinePostListView from "./TimelinePostListView";
 
 export interface TimelinePagedPostListViewProps {
@@ -25,16 +26,9 @@ const TimelinePagedPostListView: React.FC<TimelinePagedPostListViewProps> = (
       : posts.slice(-lastViewCount);
   }, [posts, lastViewCount]);
 
-  React.useEffect(() => {
-    if (lastViewCount < posts.length) {
-      const subscription = fromEvent(window, "scroll").subscribe(() => {
-        if (window.scrollY === 0) {
-          setLastViewCount(lastViewCount + 10);
-        }
-      });
-      return () => subscription.unsubscribe();
-    }
-  }, [lastViewCount, posts]);
+  useScrollToTop(() => {
+    setLastViewCount(lastViewCount + 10);
+  }, lastViewCount < posts.length);
 
   return (
     <TimelinePostListView
diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePostView.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePostView.tsx
index c9fec919..2f778ab1 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelinePostView.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelinePostView.tsx
@@ -28,15 +28,18 @@ const TimelinePostView: React.FC<TimelinePostViewProps> = (props) => {
     React.useState<boolean>(false);
   const [deleteDialog, setDeleteDialog] = React.useState<boolean>(false);
 
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  const cardRef = React.useRef<HTMLDivElement>(null!);
+  const cardRef = React.useRef<HTMLDivElement>(null);
   React.useEffect(() => {
     const cardIntersectionObserver = new IntersectionObserver(([e]) => {
       if (e.intersectionRatio > 0) {
-        cardRef.current.style.animationName = "timeline-post-enter";
+        if (cardRef.current != null) {
+          cardRef.current.style.animationName = "timeline-post-enter";
+        }
       }
     });
-    cardIntersectionObserver.observe(cardRef.current);
+    if (cardRef.current) {
+      cardIntersectionObserver.observe(cardRef.current);
+    }
 
     return () => {
       cardIntersectionObserver.disconnect();