49 asked

1

이 부분은 나중에 배우는 swr을 사용하는 게 좋습니다. 브라우저에서 캐시로 갖고 있는지라 빠르게 데이터를 불러올 수 있고, 스크롤 위치를 복원할 수 있습니다. swr에서 infinite scrolling을 제공합니다.

0

useEffect(() => {
    window.scrollTo(0, 300);
  }, []);

  const scrollPos = () => {
    console.log(window.scrollY);
    localStorage.setItem("y", window.scrollY);
  };

  useEffect(() => {
    window.addEventListener("scroll", scrollPos);

    return () => window.removeEventListener("scroll", scrollPos);
  }, []);

구글링해도 원하는 대답이 안 나와서 질문드립니다.

scrollTo를 300으로 설정했는데 321은 왜 나오는 건가요?

 useEffect(() => {
    window.scrollTo(0, 300);
  }, []);

  const scrollPos = () => {
    // console.log(window.scrollY);
    localStorage.setItem("y", window.scrollY);
  };

  useEffect(() => {
    console.log(window.scrollY);
    window.addEventListener("scroll", scrollPos);

    return () => window.removeEventListener("scroll", scrollPos);
  }, []);

 또 위와 같이 작성하면 window.scrollY가 300으로 출력됩니다. 어디서 제가 놓친걸까요?

0

저기처럼 디바운싱으로 위치를 저장하시고 리로딩 시에만 스크롤 복원을 하시면 될 것 같습니다. setTimeout을 300 정도 주고난 다음에 window.scrollTo 해보세요.

0

조언해주신 방법대로 useSWRInfinite 이용해서 scrollHeight 문제 해결했습니다. 감사합니다.

또 궁금한 점들이 있습니다.

  useEffect(() => {
    const y = localStorage.getItem("y");
    if (y) window.scrollTo(0, y);
  }, []);

  const scrollPos = useDebouncedCallback(() => {
    localStorage.setItem("y", window.scrollY);
  }, 100);

  useEffect(() => {
    window.addEventListener("scroll", scrollPos);

    return () => window.removeEventListener("scroll", scrollPos);
  }, []);

1.

위와 같이 작성하여 previous scroll position을 저장하도록 구현했습니다.

scroll event가 너무 자주 발생해서 debounce를 이용해서 일정 시간 동안은 동작하지 않도록 만들었습니다.

혹시 위 방법 말고 다른 방법으로 previous scroll position을 저장할 수 있는 방법이 있을까요?

2.

reload한 뒤에도 previous scroll position이 적용되도록 만들 수 있나요?

시도한 방법 1

useEffect(() => {
    const y = localStorage.getItem("y");
    if (y) {
      window.scrollTo(0, y);
    }

    window.onbeforeunload = () => {
      localStorage.setItem("y", window.scrollY);
    };
  }, []);

beforeunload 이벤트로 scroll position은 저장이 되는데 해당 위치로 scroll이 이동하진 않습니다.

시도한 방법 2

  useEffect(() => {
    const y = localStorage.getItem("y");
    if (y) {
      window.scrollTo(0, y);
    }

    return () => localStorage.setItem("y", window.scrollY);
  }, []);

clean up effect를 사용해봤지만 이렇게 하면 window.scrollY가 0이 됩니다.

조언 부탁드립니다.