Horizontal Scroll Section
also known assticky horizontal scroll · pinned scroll section · scroll-jacked carousel
A section where vertical scrolling is translated into horizontal movement, usually via position:sticky and transform.
A horizontal scroll section pins itself to the viewport while the user scrolls vertically, then translates the scroll delta into horizontal movement of an inner track. The user feels like they're scrolling sideways through cards, chapters, or a timeline, even though their gesture is vertical.
It's implemented either with `position: sticky` plus a CSS transform driven by scroll progress, or with libraries like Lenis, GSAP ScrollTrigger, or Framer Motion's `useScroll`. Browser-native CSS scroll-driven animations now make it possible without JavaScript at all.
The technique works best when the content is genuinely sequential — process steps, a portfolio of case studies, a feature timeline. It fails when content has no order, because the user loses the ability to scan freely.
- Process / step sequences (1 → 2 → 3 → 4)
- Case study carousels on portfolio sites
- Feature timelines
- Content where users need to skim or jump non-linearly
- Mobile when the section becomes too long — scroll feels hijacked
- +Show a progress indicator (dots, bar, or numbered steps)
- +Keep the pinned section under 5 viewport heights of total scroll
- +Provide a fallback (vertical stack) for reduced-motion users
- −Don't pin more than 6 cards — scroll feels endless
- −Don't combine with parallax inside the same section — it disorients
People also ask
Does horizontal scroll hurt accessibility?
It can. Always respect `prefers-reduced-motion` by falling back to a vertical stack, and make sure keyboard users can navigate the cards with arrow keys, not just scroll.