Projects › BibleWeb › Parallel Gospels › Synchronized scroll (all columns)
Needs Design

Synchronized scroll (all columns)

Area: Parallel Gospels Milestone: v2

Context

Problem: In the parallel Gospel view, each column scrolls independently. When a user scrolls down in the Matthew column, the other columns stay put — losing the visual alignment between accounts.

Solution: Synchronize scrolling across all Gospel columns so they move together, keeping corresponding verses aligned as the user scrolls.

Not included: Per-column independent scroll (that's the current default behavior).

Functional

Expected behavior:

  • Scrolling any column causes all columns to scroll by the same amount
  • Corresponding verses stay at the same vertical position
  • Works with both mouse wheel and touch drag

Edge cases:

  • Columns with different verse counts: shorter columns may reach the bottom before longer ones
  • Should not create scroll jank or performance issues

UX & Design

TODO: Should this be always-on or toggled? TODO: What happens when columns have very different lengths?

Technical

Implementation approach:

  • Listen for scroll events on each column container
  • When one column scrolls, set scrollTop on all other columns
  • Use requestAnimationFrame to avoid jank
  • Guard against infinite scroll event loops (column A scrolls → sets B → B fires scroll event → sets A → ...)

Reference: BibleGame had synchronized column scrolling.

Files:

  • apps/web/src/lib/components/bible/ParallelVerseView.svelte (modify)

Status

Current: NEEDS_DESIGN Milestone: v2 Priority: Medium — improves the parallel reading experience

Design questions:

  1. Always-on or toggle?
  2. How to handle columns with very different lengths?
  3. Should scroll sync be pixel-based or verse-based?

Dependencies:

  • Requires: side-by-side columns (DONE)
← Back to Parallel Gospels features