[Next.js]next/link, Skipping auto-scroll behavior due to `position: sticky` or `position: fixed` on element:

Jintae Kim·2024년 5월 31일

Nextjs

목록 보기
3/5
post-thumbnail

  • Next.js 14, App router 사용
    메뉴 이동간에 콘솔에 다음과 같은 경고가 표시된다.
    Skipping auto-scroll
    공통으로 설정한 loading.tsx 컴포넌트를 특정하고 있다.
position: sticky
position: fixed

이 두 스타일이 문제라는 건데...
구글링을 해보니 Link 컴포넌트를 사용하여 페이지간 이동시에는 이전 페이지의 스크롤 위치를 기억하고 그 위치에서 페이지가 로딩되는 것이다. 생각해보니 React router-dom 의 NavLink 를 사용했을때도 페이지간 이동시에 이전 페이지 스크롤 위치 그래도 페이지가 로딩됬던 기억이 난다. 그래서 최상단 컴포넌트 페이지에 scrollTop 이벤트가 실행되는 provider 로 랩핑했던 것 같다.
loading.tsx 컴포넌트를 position: fixed 로 화면 중앙에 보이도록 했는데 이걸 캐치하는구나...

해결 방법은 <Link ... scroll={false}> 옵션을 추가하는 것이다. 더 이상 해당 경고가 표시 되지 않았다.

[참고]
https://nextjs.org/docs/pages/api-reference/components/link
https://github.com/shadcn-ui/ui/issues/1355#issuecomment-1699762408

profile
공부하고 또 공부하고 또 공부하고

0개의 댓글