...

3 files changed, 38 insertions, 10 deletions

diff --git a/FrontEnd/src/app/utilities/useReverseScrollPositionRemember.ts b/FrontEnd/src/app/utilities/useReverseScrollPositionRemember.ts
new file mode 100644
index 00000000..8a2bd7a0
--- /dev/null
+++ b/FrontEnd/src/app/utilities/useReverseScrollPositionRemember.ts
@@ -0,0 +1,33 @@
+import React from "react";
+
+let on = false;
+
+export default function useReverseScrollPositionRemember(): void {
+  React.useEffect(() => {
+    if (on) return;
+    on = true;
+
+    let scrollPosition =
+      document.documentElement.scrollHeight -
+      document.documentElement.scrollTop;
+
+    const scrollListener = (): void => {
+      scrollPosition = document.documentElement.scrollHeight - window.scrollY;
+    };
+
+    window.addEventListener("scroll", scrollListener);
+
+    const resizeObserver = new ResizeObserver(() => {
+      document.documentElement.scrollTop =
+        document.documentElement.scrollHeight - scrollPosition;
+    });
+
+    resizeObserver.observe(document.documentElement);
+
+    return () => {
+      window.removeEventListener("scroll", scrollListener);
+      resizeObserver.disconnect();
+      on = false;
+    };
+  }, []);
+}
diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePageTemplate.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePageTemplate.tsx
index 704e51fb..1c8873f9 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelinePageTemplate.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelinePageTemplate.tsx
@@ -10,6 +10,8 @@ import { getAlertHost } from "@/services/alert";
 import Timeline from "./Timeline";
 import TimelinePostEdit from "./TimelinePostEdit";
 
+import useReverseScrollPositionRemember from "@/utilities/useReverseScrollPositionRemember";
+
 export interface TimelinePageCardProps {
   timeline: HttpTimelineInfo;
   collapse: boolean;
@@ -35,6 +37,8 @@ const TimelinePageTemplate: React.FC<TimelinePageTemplateProps> = (props) => {
     HttpTimelineInfo | "loading" | "offline" | "notexist" | "error"
   >("loading");
 
+  useReverseScrollPositionRemember();
+
   React.useEffect(() => {
     setTimeline("loading");
   }, [timelineName]);
diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePagedPostListView.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePagedPostListView.tsx
index b91357dd..e0534695 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelinePagedPostListView.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelinePagedPostListView.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 
 import { HttpTimelinePostInfo } from "@/http/timeline";
+
 import TimelinePostListView from "./TimelinePostListView";
 
 export interface TimelinePagedPostListViewProps {
@@ -38,16 +39,6 @@ const TimelinePagedPostListView: React.FC<TimelinePagedPostListViewProps> = (
     }
   }, [lastViewCount, posts]);
 
-  React.useEffect(() => {
-    if (lastViewCount !== 10) {
-      document
-        .getElementById(
-          `timeline-post-${posts[posts.length - (lastViewCount - 10)].id}`
-        )
-        ?.scrollIntoView(true);
-    }
-  }, [lastViewCount, posts]);
-
   return (
     <TimelinePostListView
       className={className}