25 lines
720 B
TypeScript
25 lines
720 B
TypeScript
import { useEffect } from "react";
|
|
|
|
/**
|
|
* Sets up a debounced scroll listener that calls `onSave(scrollY)` when the
|
|
* user scrolls, but only while `enabled` is true (e.g. the page is loaded).
|
|
*/
|
|
export function useScrollSave(
|
|
enabled: boolean,
|
|
onSave: (scrollY: number) => void,
|
|
) {
|
|
useEffect(() => {
|
|
if (!enabled) return;
|
|
let timer: ReturnType<typeof setTimeout>;
|
|
const onScroll = () => {
|
|
clearTimeout(timer);
|
|
timer = setTimeout(() => onSave(globalThis.scrollY), 100);
|
|
};
|
|
globalThis.addEventListener("scroll", onScroll, { passive: true });
|
|
return () => {
|
|
globalThis.removeEventListener("scroll", onScroll);
|
|
clearTimeout(timer);
|
|
};
|
|
}, [enabled, onSave]);
|
|
}
|