Pinned horizontal scroll

Use it for

• A short collection (four to eight items) you want people to see in full
• Timelines or steps that read naturally left to right

Avoid

• Long lists, where the pinned section feels like a trap
• Pages where people scan quickly to the footer

How it works

The row sits in a tall runway section whose child is position: sticky with the height of the container. On scroll, a requestAnimationFrame update computes progress as (scrollTop minus the runway top) divided by (runway height minus container height), clamped to 0 to 1, and translates the row by progress times its overflow width. A thin bar below shows the same progress. Outside the runway the row is simply at its start or end.

Accessibility

Reduced motion drops the pin and turns the row into a normal horizontal scroller. The cards stay in reading order in the DOM, and the container is focusable for keyboard scrolling.