fix: A very ugly fix of scroll to top problem.

2 files changed, 61 insertions, 36 deletions

diff --git a/FrontEnd/src/app/utilities/useReverseScrollPositionRemember.ts b/FrontEnd/src/app/utilities/useReverseScrollPositionRemember.ts
index 67c7c458..742751eb 100644
--- a/FrontEnd/src/app/utilities/useReverseScrollPositionRemember.ts
+++ b/FrontEnd/src/app/utilities/useReverseScrollPositionRemember.ts
@@ -1,39 +1,47 @@
 import React from "react";
 
 let on = false;
+let recordDisabled = false;
+
+function getScrollPosition(): number {
+  if (document.documentElement.scrollHeight <= window.innerHeight) {
+    return 0;
+  } else {
+    return (
+      document.documentElement.scrollHeight -
+      document.documentElement.scrollTop -
+      window.innerHeight
+    );
+  }
+}
+
+let scrollPosition = getScrollPosition();
+
+function scrollToRecordPosition(): void {
+  if (document.documentElement.scrollHeight <= window.innerHeight) return;
+  document.documentElement.scrollTop =
+    document.documentElement.scrollHeight - window.innerHeight - scrollPosition;
+}
+
+const scrollListener = (): void => {
+  if (recordDisabled) return;
+  scrollPosition = getScrollPosition();
+};
+
+const resizeObserver = new ResizeObserver(() => {
+  scrollToRecordPosition();
+});
+
+export function setRecordDisabled(disabled: boolean): void {
+  recordDisabled = disabled;
+  if (!disabled) scrollToRecordPosition();
+}
 
 export default function useReverseScrollPositionRemember(): void {
   React.useEffect(() => {
     if (on) return;
     on = true;
-
-    function getScrollPosition(): number {
-      if (document.documentElement.scrollHeight <= window.innerHeight) {
-        return 0;
-      } else {
-        return (
-          document.documentElement.scrollHeight -
-          document.documentElement.scrollTop -
-          window.innerHeight
-        );
-      }
-    }
-
-    let scrollPosition = getScrollPosition();
-    const scrollListener = (): void => {
-      scrollPosition = getScrollPosition();
-    };
-
     window.addEventListener("scroll", scrollListener);
-
-    const resizeObserver = new ResizeObserver(() => {
-      if (document.documentElement.scrollHeight <= window.innerHeight) return;
-      document.documentElement.scrollTop =
-        document.documentElement.scrollHeight -
-        window.innerHeight -
-        scrollPosition;
-    });
-
     resizeObserver.observe(document.documentElement);
 
     return () => {
diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePagedPostListView.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePagedPostListView.tsx
index b44a8ef6..ee52f4c0 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelinePagedPostListView.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelinePagedPostListView.tsx
@@ -1,8 +1,11 @@
 import React from "react";
+import { fromEvent } from "rxjs";
+import { filter, throttleTime } from "rxjs/operators";
 
 import { HttpTimelinePostInfo } from "@/http/timeline";
 
 import TimelinePostListView from "./TimelinePostListView";
+import { setRecordDisabled } from "@/utilities/useReverseScrollPositionRemember";
 
 export interface TimelinePagedPostListViewProps {
   className?: string;
@@ -24,18 +27,32 @@ const TimelinePagedPostListView: React.FC<TimelinePagedPostListViewProps> = (
       : posts.slice(-lastViewCount);
   }, [posts, lastViewCount]);
 
+  const scrollTopHandler = React.useRef<() => void>();
+
   React.useEffect(() => {
-    if (lastViewCount < posts.length) {
-      const listener = (): void => {
-        if (window.scrollY === 0 && lastViewCount < posts.length) {
-          setLastViewCount(lastViewCount + 10);
-        }
-      };
-      window.addEventListener("scroll", listener);
-      return () => window.removeEventListener("scroll", listener);
-    }
+    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?.();
+      });
+    return () => subscription.unsubscribe();
+  }, []);
+
   return (
     <TimelinePostListView
       className={className}