[Next.js 에러] Skipping auto-scroll behavior due to `position: sticky` or `position: fixed` on element 해결

참고

https://github.com/shadcn-ui/ui/issues/1355

 

에러

next.js 프로젝트에서 gnb클릭후 페이지 이동시 콘솔창에 아래같은 에러가 갑자기 떴다.

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

원인

콘솔창에서 알려준 요소를 살펴보니 다음과 같이 설정돼있었다.

 

기본적으로 Link 태그를 사용하여 다른 페이지로 이동할 때, 이전 페이지의 스크롤 위치를 기억하고 다음 페이지에서 해당 스크롤 위치로 자동으로 스크롤되는 특성이 있다. 

그러나 간혹 position: fixed나 sticky 를 사용하여 특정 요소를 화면에 고정시키는 경우,

이러한 스크롤 위치값 변화에 따라 고정된 요소의 CSS와 충돌하는 경향이 있는듯하다.

(fixed나 sticky 속성을 가진 요소가 스크롤 움직임을 제어하기 때문에 이로인해 문제가 생기는듯?)

해결

Link 태그에 다음 같이 scroll={false} 속성을 추가해주니까 해결됐다.

이렇게 하면 스크롤 위치가 항상 페이지 상단에 위치하게 된다.