Scroll · Moves as you scroll
Horizontal scroll section横向滚动区段
- scroll down, move sideways
- pinned
- axis swapped
You scroll down but this section moves sideways: a row of product cards travels right to left, and only when it runs out does the page continue downward. The section is pinned while its contents advance.
When to use it
Use it for product rows, timelines, step flows, and portfolios. Do not use it with only two or three cards — people feel they scrolled a lot and saw nothing.
Parameters
section height = total strip width · inner position sticky · translateX = −clamp(start, end, scrollY) · linear, tracks scroll 1:1
Recipe
Horizontal scroll section → section height = total strip width · inner position sticky · translateX = −clamp(start, end, scrollY) · linear, tracks scroll 1:1
One sentence for your AI
Turn this section into a horizontal scroll section: set its height to the total width of its contents (to create the scroll distance), pin the inner row with position: sticky, then clamp the vertical scroll offset to this section's range and write its negative value as translateX. It tracks the scroll 1:1 — no easing.