2 files changed, 86 insertions, 8 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;