hooks use-save-scroll.ts

0% Statements 0/18

0% Branches 0/2

0% Functions 0/6

0% Lines 0/17

Press n or j to go to the next uncovered block, b, p or k for the previous block.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import { useEffect, useRef } from "react";
import { debounce } from "lodash";
 
export function useSaveScroll<T extends HTMLElement>(
  ref: React.RefObject<T>,
  onSave: (scrollTop: number) => void,
  delayMs = 200,
) {
  const onSaveRef = useRef(onSave);
 
  useEffect(() => {
    onSaveRef.current = onSave;
  }, [onSave]);
 
  useEffect(() => {
    const el = ref.current;
    Iif (!el) return;
 
    const debounced = debounce(
      (scrollTop: number) => {
        onSaveRef.current(scrollTop);
      },
      delayMs,
      { trailing: true },
    );
 
    const handleScroll = () => {
      debounced(el.scrollTop);
    };
 
    el.addEventListener("scroll", handleScroll);
 
    return () => {
      el.removeEventListener("scroll", handleScroll);
      debounced.flush();
    };
  }, [ref, delayMs]);
}