(error) next.js 14 - Skipping auto-scroll behavior due to position: sticky or position: fixed on element 해결 및 원인

문제 상황

---

Modal 창을 구현하는 도중, 콘솔창에

Skipping auto-scroll behavior due to 
`position: sticky` or `position: fixed` on element: ...

라는 에러가 떴다.

해결

---

router.push('/contract', {scroll:false})

Modal 창이 띄워지는 곳으로 이동할 때 스크롤 옵션 없이 router.push('')를 수행한 것이 문제였다. 위처럼 {scroll:boolean} 값을 추가해주면 해결이 된다.

router.push 말고 link 로 이동하는 사람들도

<Link href="/.." scroll={false}>

이런식으로 스크롤 옵션을 추가해주면 된다 .

원인

---

use-router 관련 Next.js 공식 문서를 살펴본 결과, Next.js는 새로운 경로로 이동할 때 페이지 상단으로 스크롤된다고 한다. 이러한 scroll restoration이 이동된 페이지 내의 position : fixed 혹은 position: sticky 와 같은 페이지 고정요소와 충돌할 때, 자동 스크롤 기능이 제대로 작동하지 않는 것이 문제였다.

내 코드같은 경우는 Modal component 구현 시 모달 외부를 고정시키고 싶어서 fixed 를 이용했기 때문에 워닝이 떴다.

더 근본적으로 들어가서, position : fixed 혹은 position: sticky 의 작동방식으로 볼 때, 이러한 고정 요소들은 HTML 페이지 레이아웃에서 공간을 차지하지 않고 브라우저 창에 실질적으로 포함되지 않는다.

따라서 Next.js가 페이지의 특정 요소로 자동 스크롤을 시도할 때, 고정된 요소의 상대적인 위치를 정확하게 계산할 수 없고, 이로인해 부적적한 자동스크롤이 이루어지는 것을 방지해 next.js에서 자동스크롤 기능을 제공하지 않는다고 한다.

참고 :
next.js 공식문서 (use-router)

https://github.com/vercel/next.js/discussions/64534