Fullpage Scroll

Combine the moveType: "strict", bound, and align options to build a fullpage scroll 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

Summary

Key Options

Option	Type	Value	Role
moveType	string	"strict"	Move only one page at a time
bound	boolean	true	Prevent empty space at both ends
align	string	"prev"	Align pages to the viewport start
horizontal	boolean	false	Vertical scrolling

Direction Comparison

Direction	horizontal	Result	Required Setting
Vertical (Fullpage)	false	Swipe up/down	Height must be set on viewport
Horizontal (Slider)	true	Swipe left/right	Default behavior

Details

Role of moveType: "strict"

moveType: "strict" ensures that no matter how hard you swipe, only exactly one panel (one page) moves at a time. This is the key to fullpage scroll — "snap" (the default) can skip multiple panels depending on swipe strength, making it unsuitable for fullpage.

Vertical Direction Setup

Setting horizontal: false enables vertical scrolling. In this case, you must specify a height (height) on the viewport element. Use 100vh for fullscreen, or a fixed height for a specific area.

Related Options

• moveType is the key: Only "strict" guarantees exactly 1-page movement
• Combination with bound: Prevents empty space from showing on the last page
• Combination with align: "prev": Aligns each page flush with the viewport start

Use Cases

When should you use this?

• Landing pages: Fullpage transitions between sections
• Presentation views: Slide navigation
• Mobile app onboarding: Step-by-step introduction screens

Notes

Caution

• For vertical direction (horizontal: false), height must be set on the viewport. Without it, the height becomes 0 and nothing will be visible.
• Vertical scrolling may conflict with the browser's default scroll. Using preventDefaultOnDrag: true together resolves this.

Related Links

Related Options

• moveType: Movement type
• bound: Boundary restriction
• horizontal: Scroll direction
• preventDefaultOnDrag: Prevent default behavior on drag

Related Demos

• Movement Types: Detailed comparison of moveType options
• Carousel: Other option combination patterns