diff options
Diffstat (limited to 'FrontEnd/src/app/utilities/useReverseScrollPositionRemember.ts')
-rw-r--r-- | FrontEnd/src/app/utilities/useReverseScrollPositionRemember.ts | 45 |
1 files changed, 37 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 { |