scrollBehavior

홈페이지에서 페이지 이동 간에 스크롤을 특정 위치에 놓고 싶을 경우, 사용할 수 있는 방법이 있습니다.

그것은 바로 scrollBehavior인데요. 이것이 무엇이고, 어떻게 사용하는 지 알아봅시다!

 

---

1. scrollBehaivor

scrollBehaivor은 페이지 간 스크롤 위치를 제어하는 데 사용되는 옵션입니다. 이를 통해 사용자가 페이지를 이동할 때, 스크롤 동작을 커스터마이즈 할 수 있어요.

 

---

2. 기본 사용법

사용 방법은 다음과 같아요. (저는 Vue를 사용했습니다.)

import Vue from 'vue';
import Router from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';

Vue.use(Router);

const router = new Router({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ],
  scrollBehavior(to, from, savedPosition) {
    // savedPosition이 있으면, 해당 위치로 스크롤
    if (savedPosition) {
      return savedPosition;
    } else {
      // 기본적으로 페이지 상단으로 스크롤
      return { x: 0, y: 0 };
    }
  }
})

export default router;

 

코드에 적혀있는 scrollBehavior 함수 인자들에 대해 알아봅시다.

• to : 이동할 route 객체입니다.
• from : 현재 route 객체입니다.
• savedPosition : 브라우저의 뒤로가기 버튼으로 이동한 경우, 이전 스크롤 위치입니다.

이 코드에서는 savedPosition이 true일 경우, 사용자가 이전 route에서 스크롤한 위치로 돌아갈 수 있도록 합니다.

savedPosition이 없을 경우, 페이지의 상단으로 스크롤해요.

 

이 외에도 특정 라우트에 대해 다르게 설정하거나, 특정 조건에 따라 다른 스크롤 동작을 구현할 수 있어요. 예를 들어, 특정 페이지에서는 스크롤을 하지 않거나, 다른 위치로 스크롤하도록 설정하는 것이지요.

 

---

3. 정리하며

지금까지 Vue Router의 scrollBehavior에 대해 알아보았습니다.

이를 활용하면, 사용자의 경험을 더욱 향상시킬 수 있어요.

 

참고

행복주의자 님의 [Udemy Vue 완벽가이드 Section13] 183. 스크롤 동작 제어하기

Vue Router 홈페이지의 scroll-behavior

버미노트 님의 [vue-router] Scroll Behavior