ComponentsChapter Navigation
Text

Chapter Navigation

Horizontal pull gesture to navigate between adjacent chapters in a column-scrolling document.

Design question

How does the horizontal pull-to-paginate feel as a vertical gesture metaphor?

Pull right → previous chapter

다음 ‹› 이전
세로쓰기 2장

A gesture input: drag left past the last column to advance, right past the first to go back. Overscroll resistance at the ends, a ring that fills as you pull and arms at 100%, firing on release — the classic pull-to-refresh rotated 90° onto the column-scroll axis. Shown here as a bare control, decoupled from any content it drives.

tsx
1// RTL pull-to-paginate
2// Overscroll past leftmost column → next chapter
3// Overscroll past rightmost column → previous chapter
4
5function useChapterPull(scrollRef, onNext, onPrev) {
6 const pulling = useRef(false)
7 const startX = useRef(0)
8 const THRESHOLD = 80

Guidance

Do
  • Use the horizontal overscroll gesture — it matches the column scrolling axis
  • Show a progress ring filling as the user pulls
  • Add haptic ticks at 25%, 50%, 75%, 100% and a strong landing haptic on trigger
Don't
  • Use vertical pull for chapter navigation — it conflicts with scroll
  • Trigger immediately on overscroll — require a release gesture to confirm
  • Show a spinner on chapter load — show the skeleton of the next chapter instead

Accessibility

Provide accessible alternative (toolbar buttons) for this gesture. Announce chapter change via aria-live.

Open Question

On desktop, what keyboard shortcut maps to chapter navigation in a vertical reader? Arrow keys are taken by text navigation.

← PreviousHighlightNext →Hyperlink Treatment