next.js 페이지 이동 시 스크롤 이슈

Question

next14버전 사용중이구요. 페이지 라우팅 시 스크롤 관련 이슈가 있어 자문을 구하고자 여쭤봅니다.먼저 제 프로젝트를 설명드리자면 /comic 페이지와 /comic/ranking 페이지는 동일한 레이아웃을 공유중입니다. 그리고 그 레아이웃 컴포넌트는 sublayout 입니다. sublayout 컴포넌트에는 header 노출 관련 로직이 있는데요header의 height이상 스크롤을 내리면 header 가 사라지게 하고 스크롤을 한번이라도 위로 올리면 헤더가 다시 노출되도록 세팅해놓았습니다.예를 들어 header의 높이가 100이라면 window.scrollY 값이 100을 넘으면 header가 화면에서 사라집니다.이 상태에서 다시 스크롤을 올리면 header가 노출됩니다. 헤더가 다시 노출되는 조건은 scrollY 값과 무관합니다. 그냥 스크롤을 올리는 이벤트 자체가 발생하면 header를 노출시키도록 세팅했습니다. 여기서 이상한 점이 스크롤을 header의 height보다 적게 내린 상태 (ex. height가 100이라면 scrollY 값이 50일 때) 에서 sublayout 내부에 있는 tab을 이용해 페이지 이동 시 (ex. /comic -> /comic/ranking) /comic/ranking 페이지 스크롤이 최상단에 위치하지 않고 이전 페이지 스크롤 상태를 유지하는 버그가 있습니다. 예를 들어 scrollY 값이 50일 때 페이지 이동하면 /comic/ranking 페이지 스크롤이 50인채로 로드됩니다.더 이상한건 /comic 페이지에서 scrollY 값을 header height 이상으로 내린 후 (ex. height가 100이라면 scrollY 값이 200일 때) 페이지 이동 하면 스크롤이 정상적으로 최상단으로 이동된다는 점입니다. 즉 화면에서 header가 사라진 후 페이지 이동 시 스크롤이 최상단으로 가고 header 가 화면에 노출된 상태로 페이지 이동하면 스크롤값을 기억?해서 페이지 이동하는 버그가 있습니다. 혹시 이와 관련해서 원인을 아시는 분이 있다면 알려주심 감사하겠습니다!!제 프로젝트 디렉토리 구조입니다.📦comic┣ 📂ranking┃ ┣ 📂[type]┃ ┃ ┣ 📜layout.tsx┃ ┃ ┗ 📜page.tsx┃ ┣ 📜layout.tsx┃ ┗ 📜page.tsx┣ 📜layout.tsx┗ 📜page.tsx컴포넌트 로직은 회사코드라 올릴 수가 없는 점 양해부탁드립니다.

캐티 · Answer

스크롤은 중첩되는 수가 있어서 프로그래머가 헤더라인 위치의 재설정을 정의해주어야 해요. 일반적으로 이케 하지 아니하는 경우에 (애플 진영) 사파리 같은 저기 멀리서 혼자서 이케이케 하는 브라우저에서 안되어버리는 사고가 나요.

frontend · Answer

로직은 정확하게 모르겠으나 레이아웃에 스크롤 로직이 있으면 스크롤은 유지되는게 정상일거에요 왜냐하면 공통 레이아웃을 쓰셨으니 하위 컴포넌트만 재렌더링될거고 레이아웃은 한번만 렌더링 될테니까레이아웃 단에서 패스네임이 바뀌면 강제로 올려야 할거 같아요

next.js 페이지 이동 시 스크롤 이슈

2개의 답변

Q&A 목록