No description
Jonathan Hvid
f90480bc8b
Replaces the snap-based scroll-by-arrow model with one that handles
three input modalities feeding the same scroll state. Result: the
track glides continuously instead of clicking into milestones.
Stripped:
- scroll-snap-type: x mandatory on .rr-scroll
- scroll-behavior: smooth on .rr-scroll
- scroll-snap-align: center on .rr-dot
- The fades-only updateNav stub from commit 2
Added on .rr-scroll:
- cursor: grab → grabbing on .rr-dragging
- touch-action: pan-y so vertical page-scroll passes through on mobile
while horizontal drags activate the route's own drag handler
- user-select: none stops text selection mid-drag
- .rr-dragging .rr-card { pointer-events: none } so a hover-reveal
can't pop open while the track is being dragged
Script (vanilla, ~140 lines):
- animateScrollTo(target, durationMs): cubic-ease-out via RAF.
Cancels any existing momentum or animation before starting.
- Wheel handler: vertical deltaY translates to horizontal scrollLeft
when |deltaX| < |deltaY|; horizontal trackpad gestures pass through
1:1 unscaled. preventDefault on this scroll element only — vertical
wheel elsewhere on the page scrolls the page as normal.
- Pointer-drag: pointerdown captures the start position + scrollLeft;
pointermove updates scrollLeft and tracks velocity in px/ms over
the most recent sample. setPointerCapture for cross-element drag.
- Momentum on release: signed velocity × 16ms decays at 0.93 per
frame, stops below 0.4 px/frame. Direction inverted because
dragging right moves scrollLeft left.
- Click vs drag discrimination at 5px total movement: under 5px,
the synthetic click passes through (card navigates); over 5px,
a capturing-phase click suppressor on the scroll element eats
the next click so a drag-then-release-over-a-card doesn't
accidentally navigate.
- Advance arrow click now runs animateScrollTo(scrollLeft + 60% of
viewport, 480ms) instead of the placeholder native scrollBy.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
||
|---|---|---|
| .claude | ||
| content | ||
| design | ||
| migrations | ||
| public | ||
| scripts | ||
| src | ||
| tests | ||
| .env.example | ||
| .gitignore | ||
| astro.config.mjs | ||
| CLAUDE.md | ||
| DECISIONS.md | ||
| HANDOVER.md | ||
| KNOWN_ISSUES.md | ||
| package.json | ||
| pnpm-lock.yaml | ||
| SPEC.md | ||
| todo.md | ||
| tsconfig.json | ||
| vitest.config.ts | ||