diff options
author | crupest <crupest@outlook.com> | 2023-09-21 23:49:12 +0800 |
---|---|---|
committer | crupest <crupest@outlook.com> | 2023-09-21 23:49:12 +0800 |
commit | d477c7270c90b190ed82b13f48f39a05d83503d2 (patch) | |
tree | 572f74b2adc75247b9d1c9a8965e3de2559d4160 /FrontEnd/src/migrating/hooks | |
parent | a8a8385cd959e4d9d57b8a35381d2851049c07ff (diff) | |
download | timeline-d477c7270c90b190ed82b13f48f39a05d83503d2.tar.gz timeline-d477c7270c90b190ed82b13f48f39a05d83503d2.tar.bz2 timeline-d477c7270c90b190ed82b13f48f39a05d83503d2.zip |
Fix #1394.
Diffstat (limited to 'FrontEnd/src/migrating/hooks')
-rw-r--r-- | FrontEnd/src/migrating/hooks/useReverseScrollPositionRemember.ts | 58 |
1 files changed, 58 insertions, 0 deletions
diff --git a/FrontEnd/src/migrating/hooks/useReverseScrollPositionRemember.ts b/FrontEnd/src/migrating/hooks/useReverseScrollPositionRemember.ts new file mode 100644 index 00000000..339a12b8 --- /dev/null +++ b/FrontEnd/src/migrating/hooks/useReverseScrollPositionRemember.ts @@ -0,0 +1,58 @@ +// Not used now!!! But preserved for future use. + +import { useEffect } from "react"; + +let on = false; + +let rememberedReversePosition = getReverseScrollPosition(); + +export function getReverseScrollPosition(): number { + if (document.documentElement.scrollHeight <= window.innerHeight) { + return 0; + } else { + return ( + document.documentElement.scrollHeight - + document.documentElement.scrollTop - + window.innerHeight + ); + } +} + +export function scrollToReverseScrollPosition(reversePosition: number): void { + if (document.documentElement.scrollHeight <= window.innerHeight) return; + + const old = document.documentElement.style.scrollBehavior; + document.documentElement.style.scrollBehavior = "auto"; + + const newPosition = + document.documentElement.scrollHeight - + window.innerHeight - + reversePosition; + + window.scrollTo(0, newPosition); + + document.documentElement.style.scrollBehavior = old; +} + +const scrollListener = (): void => { + rememberedReversePosition = getReverseScrollPosition(); +}; + +const resizeObserver = new ResizeObserver(() => { + scrollToReverseScrollPosition(rememberedReversePosition); +}); + +export default function useReverseScrollPositionRemember(): void { + useEffect(() => { + if (on) return; + on = true; + window.addEventListener("scroll", scrollListener); + resizeObserver.observe(document.documentElement); + + return () => { + resizeObserver.disconnect(); + window.removeEventListener("scroll", scrollListener); + on = false; + }; + }, []); +} |