Fullpage Scroll

moveType: "strict", bound, align 옵션을 조합하여 풀페이지 스크롤 UI를 구성합니다.

JavaScript

import Flicking from "@egjs/flicking";
import "@egjs/flicking/dist/flicking.css";
import "./styles.css";

const PAGES = [
  { title: "Page 1", subtitle: "Welcome", color: "#e74c3c" },
  { title: "Page 2", subtitle: "Features", color: "#3498db" },
  { title: "Page 3", subtitle: "Pricing", color: "#2ecc71" },
  { title: "Page 4", subtitle: "Contact", color: "#f39c12" },
  { title: "Page 5", subtitle: "About", color: "#9b59b6" }
];

const camera = document.querySelector(".flicking-camera");
PAGES.forEach(page => {
  const panel = document.createElement("div");
  panel.className = "page-panel";
  panel.style.background = page.color;
  panel.innerHTML = `<span>${page.title}</span><span class="page-subtitle">${page.subtitle}</span>`;
  camera.appendChild(panel);
});

const viewport = document.getElementById("flick");
const btnVertical = document.getElementById("btn-vertical");
const btnHorizontal = document.getElementById("btn-horizontal");

let flicking = new Flicking("#flick", {
  horizontal: false,
  moveType: "strict",
  bound: true,
  align: "prev"
});

btnVertical.addEventListener("click", () => {
  flicking.destroy();
  viewport.classList.add("vertical");
  btnVertical.classList.add("active");
  btnHorizontal.classList.remove("active");
  flicking = new Flicking("#flick", {
    horizontal: false,
    moveType: "strict",
    bound: true,
    align: "prev"
  });
});

btnHorizontal.addEventListener("click", () => {
  flicking.destroy();
  viewport.classList.remove("vertical");
  btnHorizontal.classList.add("active");
  btnVertical.classList.remove("active");
  flicking = new Flicking("#flick", {
    horizontal: true,
    moveType: "strict",
    bound: true,
    align: "prev"
  });
});

Open Sandbox

React

import Flicking from "@egjs/react-flicking";
import "@egjs/react-flicking/dist/flicking.css";
import "./styles.css";
import { useState } from "react";

const PAGES = [
  { title: "Page 1", subtitle: "Welcome", color: "#e74c3c" },
  { title: "Page 2", subtitle: "Features", color: "#3498db" },
  { title: "Page 3", subtitle: "Pricing", color: "#2ecc71" },
  { title: "Page 4", subtitle: "Contact", color: "#f39c12" },
  { title: "Page 5", subtitle: "About", color: "#9b59b6" }
];

export default function App() {
  const [isVertical, setIsVertical] = useState(true);

  return (
    <div>
      <div className="controls">
        <button className={`button ${isVertical ? "active" : ""}`} onClick={() => setIsVertical(true)}>
          Vertical (Fullpage)
        </button>
        <button className={`button ${!isVertical ? "active" : ""}`} onClick={() => setIsVertical(false)}>
          Horizontal (Slider)
        </button>
      </div>
      <Flicking key={isVertical ? "v" : "h"} horizontal={!isVertical} moveType="strict" bound={true} align="prev">
        {PAGES.map((page, i) => (
          <div className="page-panel" key={i} style={{ background: page.color }}>
            <span>{page.title}</span>
            <span className="page-subtitle">{page.subtitle}</span>
          </div>
        ))}
      </Flicking>
    </div>
  );
}

Open Sandbox

Vue@3

<template>
  <div>
    <div class="controls">
      <button :class="['button', isVertical && 'active']"
              @click="isVertical = true">
        Vertical (Fullpage)
      </button>
      <button :class="['button', !isVertical && 'active']"
              @click="isVertical = false">
        Horizontal (Slider)
      </button>
    </div>
    <Flicking
      :key="isVertical ? 'v' : 'h'"
      :options="{
        horizontal: !isVertical,
        moveType: 'strict',
        bound: true,
        align: 'prev'
      }"
    >
      <div v-for="(page, i) in PAGES" :key="i"
           class="page-panel" :style="{ background: page.color }">
        <span>{{ page.title }}</span>
        <span class="page-subtitle">{{ page.subtitle }}</span>
      </div>
    </Flicking>
  </div>
</template>

<script setup>
import Flicking from "@egjs/vue3-flicking";
import { ref } from "vue";
import "@egjs/vue3-flicking/dist/flicking.css";

const isVertical = ref(true);
const PAGES = [
  { title: "Page 1", subtitle: "Welcome", color: "#e74c3c" },
  { title: "Page 2", subtitle: "Features", color: "#3498db" },
  { title: "Page 3", subtitle: "Pricing", color: "#2ecc71" },
  { title: "Page 4", subtitle: "Contact", color: "#f39c12" },
  { title: "Page 5", subtitle: "About", color: "#9b59b6" }
];
</script>


<style>

.flicking-viewport.vertical {
  display: block;
  width: 100%;
}

.flicking-panel {
  width: 200px;
  height: 150px;
  margin-right: 10px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
  color: white;
}

.panel-1 { background: #3e8ed0; }
.panel-2 { background: #00d1b2; }
.panel-3 { background: #f14668; }
.panel-4 { background: #ffe08a; color: #333; }
.panel-5 { background: #48c78e; }

.demo-container {
  margin-bottom: 24px;
}

.demo-label {
  font-weight: bold;
  margin-bottom: 8px;
  color: #666;
}

.button {
  padding: 8px 16px;
  margin: 4px;
  border: 2px solid #3498db;
  background: transparent;
  color: #3498db;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.button:hover {
  background: #3498db;
  color: white;
}

.controls {
  display: flex;
  justify-content: center;
  margin-top: 16px;
  gap: 8px;
}

.page-panel {
  width: 100%;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: bold;
  color: white;
  flex-direction: column;
  gap: 8px;
}

.page-panel .page-subtitle {
  font-size: 14px;
  font-weight: normal;
  opacity: 0.8;
}

.flicking-viewport {
  height: 300px;
}

.controls {
  display: flex;
  justify-content: center;
  margin-top: 12px;
  gap: 8px;
}

.button {
  padding: 8px 16px;
  border: 2px solid #3498db;
  background: transparent;
  color: #3498db;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.button:hover {
  background: #3498db;
  color: white;
}

.button.active {
  background: #3498db;
  color: white;
}

</style>

Open Sandbox

요약

주요 옵션

옵션	타입	설정값	역할
moveType	string	"strict"	한 번에 한 페이지만 이동
bound	boolean	true	양 끝에서 빈 공간 방지
align	string	"prev"	페이지를 뷰포트 시작점에 정렬
horizontal	boolean	false	세로 방향 스크롤

방향별 비교

방향	horizontal	결과	필수 설정
세로 (Fullpage)	false	위/아래 스와이프	뷰포트에 height 필수
가로 (Slider)	true	좌/우 스와이프	기본 동작

상세 설명

moveType: "strict"의 역할

moveType: "strict"는 아무리 세게 스와이프해도 정확히 한 패널(한 페이지)만 이동합니다. 이것이 풀페이지 스크롤의 핵심이며, "snap"(기본값)은 세기에 따라 여러 패널을 건너뛸 수 있어 풀페이지에 부적합합니다.

세로 방향 설정

horizontal: false로 설정하면 세로 방향 스크롤이 됩니다. 이때 뷰포트 요소에 반드시 높이(height)를 지정해야 합니다. 풀스크린이라면 100vh, 특정 영역이라면 고정 높이를 사용합니다.

연관 옵션

• moveType이 핵심: "strict"만 정확히 1페이지씩 이동을 보장
• bound와의 조합: 마지막 페이지에서 빈 공간이 보이지 않도록 방지
• align: "prev"와의 조합: 각 페이지를 뷰포트 시작점에 맞춰 빈틈 없이 배치

사용 시나리오

언제 사용하나요?

• 랜딩 페이지: 섹션별 풀페이지 전환
• 프레젠테이션 뷰: 슬라이드 넘기기
• 모바일 앱 온보딩: 단계별 소개 화면

주의사항

주의

• 세로 방향(horizontal: false)에서 뷰포트에 height를 반드시 설정해야 합니다. 설정하지 않으면 높이가 0이 되어 아무것도 보이지 않습니다.
• 세로 스크롤 시 브라우저의 기본 스크롤과 충돌할 수 있습니다. preventDefaultOnDrag: true를 함께 사용하면 해결됩니다.

관련 링크

관련 옵션

• moveType: 이동 방식
• bound: 경계 제한
• horizontal: 스크롤 방향
• preventDefaultOnDrag: 드래그 시 기본동작 방지

관련 데모

• Movement Types: moveType 옵션 상세 비교
• Carousel: 다른 옵션 조합 패턴