Scroll· 3 sites
Reference: ResizeObserver, MDN contributors
How it works
Vertical scroll moves a gallery sideways without taking over the wheel or touch.In 5 steps.
Let the wheel keep its direction. A sticky viewport crops a wider strip; the strip travels exactly its overflow width as the section scrolls past. Sunday and Naya provide the library evidence for this pattern; the artwork here is original CSS.
The controls below are authored demonstration values, not measurements of the linked sites. The stored fits currently describe scroll smoothing and intro curves, not this effect's geometry; see each site's spec sheet for those separately measured values and fit errors.
- 01
Build a real row
Use a flex row with fixed-basis cards inside a sticky clipping stage.
- 02
Measure the overflow
The distance is track.scrollWidth minus the stage width. Recompute when the container resizes, not on every frame.
- 03
Translate only the track
Map native vertical progress to a negative horizontal transform. Do not cancel wheel or touch events.
- 04
Offer a simpler reading order
Under reduced motion, remove the runway and stack the cards vertically.
- 05
Dispose cleanly
Call destroy() when the view unmounts to disconnect resize and preference observers, remove scroll listeners and cancel pending frames.