next.js 스크롤 복원 막기

이슈🐞

구현 중 페이지에서 모달 컴포넌트 닫기 버튼 클릭시 모달이 닫히면서 스크롤이 상단으로 올라가버리는 버그 발생.

항상 발생하는것이 아닌 간헐적으로 발생함. 주로 처음 사이트 접속 후 실행하면 발생하며, 이후 잘 발생안함.

try1

window.history.scrollRestoration = 'manual' 을 사용

//스크롤 복원 비활성화
if (history.scrollRestoration) {
  window.history.scrollRestoration = 'manual';
}

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

🔍 History.ScrollRestoration?

기록 탐색 시 사용할 스크롤 위치 복원 기능의 기본값을 웹에 지정.

1. auto : 사용자의 스크롤 위치 장소로 복원
2. manual : 스크롤 복원x. 사용자가 직접 스크롤 해야됨.

MDN-ScrollRestoration

→ 적용전보다는 빈도가 줄어든 느낌이나, 가끔씩 계속 발생함.

---

try2

router.push의 scroll 옵션 사용

router.push 사용시 scroll: false를 설정해서 스크롤 막을 수 있음.

router.push('/url', undefined, { scroll: false });

https://stackoverflow.com/questions/65902664/next-js-router-push-without-scrolling-to-the-top

→ 근데 이러면 history에 계속 쌓임

---

try3

router.beforePopState() 를 사용

 router.beforePopState((state) => {
    state.options.scroll = false
    return true
  })

https://nextjs.org/docs/api-reference/next/router#routerbeforepopstate
https://developer.mozilla.org/en-US/docs/web/api/window/popstate_event

→ 이후 발생안함.