diff options
-rw-r--r-- | FrontEnd/src/app/utilities/useReverseScrollPositionRemember.ts | 23 | ||||
-rw-r--r-- | FrontEnd/src/app/views/timeline-common/TimelinePagedPostListView.tsx | 44 |
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 |