스크롤 동작 설정
scrollBehavior(to, from, savedPosition), 부드러운 스크롤, 해시 위치로 이동, 위치 복원을 다룹니다.
스크롤 동작 설정은(는) CoddyKit의 무료 Vue Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Vue Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Vue Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
내비게이션 시 스크롤 제어
단일 페이지 앱에서는 페이지가 다시 로드되지 않으므로 브라우저가 스크롤을 자동으로 초기화하지 않습니다. Vue Router의 scrollBehavior 함수를 사용하면 각 내비게이션 후 페이지를 어디로 스크롤할지 결정할 수 있습니다.
위치
라우터를 생성할 때 scrollBehavior를 전달합니다. 이 함수는 모든 내비게이션에서 실행됩니다.
const router = createRouter({
history: createWebHistory(),
routes,
scrollBehavior(to, from, savedPosition) {
// return a position
}
})세 가지 매개변수
to(대상 라우트), from(현재 라우트), savedPosition을 전달받습니다. 마지막 매개변수는 브라우저의 뒤로 가기 또는 앞으로 가기 버튼으로 이동할 때만 null이 아닌 값입니다.
새 라우트에서 맨 위로 스크롤
가장 간단한 동작은 사용자가 새 페이지로 이동할 때마다 맨 위로 스크롤하는 것입니다.
scrollBehavior(to, from, savedPosition) {
return { top: 0 }
}뒤로 갈 때 위치 복원
savedPosition이 있으면 이를 반환하여 뒤로 가기 버튼을 눌렀을 때 사용자가 원래 있던 정확한 위치로 돌아가게 합니다. 이는 기본 브라우저 동작과 같습니다.
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition
}
return { top: 0 }
}savedPosition이 중요한 이유
savedPosition을 복원하지 않으면 뒤로 가기를 눌렀을 때 사용자는 스크롤해 읽었던 긴 목록의 맨 위로 이동합니다. 이를 반환하면 원래 위치가 유지됩니다.
앵커로 스크롤
대상 URL에 #section과 같은 해시가 있으면 el 선택자를 반환하여 해당 요소로 스크롤합니다.
scrollBehavior(to) {
if (to.hash) {
return { el: to.hash }
}
return { top: 0 }
}부드러운 스크롤
즉시 이동하는 대신 스크롤을 애니메이션으로 처리하려면 behavior: 'smooth'를 추가합니다.
scrollBehavior(to) {
if (to.hash) {
return { el: to.hash, behavior: 'smooth' }
}
}고정 헤더를 위한 오프셋
고정 헤더가 대상 앵커를 가릴 수 있습니다. top을 오프셋으로 추가하여 요소가 헤더 아래에 위치하도록 합니다.
scrollBehavior(to) {
if (to.hash) {
return { el: to.hash, top: 80 }
}
}스크롤 지연
콘텐츠가 비동기적으로 로드된다면 지연 후 위치를 반환하는 Promise를 반환합니다. 그러면 스크롤이 실행될 때 대상이 존재합니다.
scrollBehavior(to, from, savedPosition) {
return new Promise((resolve) => {
setTimeout(() => resolve({ top: 0 }), 300)
})
}규칙 결합
완전한 처리기는 저장된 위치를 먼저 적용하고, 그다음 해시 앵커를 적용하며, 마지막으로 기본값인 맨 위를 사용합니다.
scrollBehavior(to, from, savedPosition) {
if (savedPosition) return savedPosition
if (to.hash) return { el: to.hash, behavior: 'smooth' }
return { top: 0 }
}빠른 확인
스크롤 동작에 대한 지식을 확인해 보세요.
복습
scrollBehavior는 내비게이션 시 스크롤을 제어합니다:
- to, from, savedPosition을 전달받습니다.
- 뒤로 가기 버튼의 위치를 복원하려면 savedPosition을 반환합니다.
- 앵커로 스크롤하려면 { el: to.hash }를 반환합니다.
- 새 라우트로 처음 이동할 때는 { top: 0 }을 반환합니다.
자주 묻는 질문
“스크롤 동작 설정” 강의는 무료인가요?
네 — “스크롤 동작 설정” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Vue Academy 강의 전체를 잠금 해제할 수 있습니다. Vue Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“스크롤 동작 설정”에서 뭘 배우나요?
scrollBehavior(to, from, savedPosition), 부드러운 스크롤, 해시 위치로 이동, 위치 복원을 다룹니다. 브라우저에서 직접 실행하는 실습 코드로 Vue Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Vue Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Vue Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.
“스크롤 동작 설정” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Vue Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Vue Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.