2023.07.13[window.history.scrollRestoration]

window.history.scrollRestoration

 

현재 진행중인 프로젝트에서 페이지 이동 시 하단으로 스크롤이 움직였다가 페이지가 이동되는 현상이 발생했다.

뒤로가기 시 스크롤이 하단으로 이동한 뒤 페이지가 이동되는 모습

처음에는 무한스크롤 부분이라 무한스크롤 스크롤 위치를 기억해두는 로직때문에 발생하는 문제인 줄 알았는데 알고보니 스크롤이 되는 모든 페이지에서 동일한 현상이 발생하고 있었다.

 

스크롤 관련해서 별도로 처리해준 것이 없어서 무엇이 원인일지 고민하다가 chat gpt에게 물어보니 브라우저의 기본동작이라고 대답해주었다. 그래서 찾아보니 브라우저에서 기본으로 이전 페이지의 스크롤을 유지해주는 기능을 지원하고 있었다.  

 

https://developer.mozilla.org/en-US/docs/Web/API/History/scrollRestoration

History: scrollRestoration property - Web APIs | MDN

 

그리고 이러한 동작이 평소에는 편리할 수 있지만 때때로 개발자가 원하는대로 동작하지 않게 되는 원인이 되기도 한다. 다행히 해당 기능을 조정할 수 있었다.

 

  useEffect(() => {
    if ('scrollRestoration' in window.history) {
      window.history.scrollRestoration = 'manual';
    }
  }, []);

 

window.history.scrollRestoration의 value

"auto" 이전 페이지의 위치를 기억하고 이동.

"manual" 이동하지 않고 사용자가 직접 이동해야 함.

 

스크롤이 하단으로 이동하는 현상이 사라진 모습

 

 

 

참고한 블로그

https://blog.coderifleman.com/2016/11/28/scroll-restoration-property-of-history/

---

 

설정하지도 않은 페이지 이동이 말썽을 부려서 새로운 것을 알게 되었다. 크게 문제되지 않는 부분일 수도 있지만 계속 페이지 이동을 하다보니 스크롤이 이동되는 것이 신경쓰이고 피로해지는 기분이었다. 처음엔 당연히 무한스크롤 관련 문제일 줄 알았는데 아니어서 조금 막막했었다. 원인을 제거하는 것이 베스트인데 원인이 뭔지 감이 안 잡혔었는데 chat gpt 덕분에 원인도 찾고 새로운 것도 알아간다!

그런데 왜 기존에는 스크롤 위치를 기억해서 이동하지 못한 걸까? 데이터를 동적으로 불러오는 과정과 관련이 있는건지 찾아봐야겠다!