Back to Dictionary
Scroll & Navigation
●●○Customize
Horizontal Scroll Gallery
A section of the page where vertical scrolling temporarily translates into horizontal scrolling to reveal a gallery of cards or images, before continuing vertically.
Live Demo
What It Is
A section of the page where vertical scrolling temporarily translates into horizontal scrolling to reveal a gallery of cards or images, before continuing vertically.
✓When to Use
- Showcasing features, portfolios, or timelines sequentially without taking up massive vertical space
✕When NOT to Use
- If the content contains its own vertical scrolling (e.g., long text boxes)
Configuration Tips
- 01Use a sticky container whose height is equal to the total width of the horizontal items, mapping window vertical scroll to the translateX of the gallery track
You've Seen It In
Awwwards WinnersApple Mac Pro page
Prompt Templates
Copy and paste these prompts into your AI coding assistant.
Create a horizontal scroll section pinned to the viewport.
Code Example (Tailwind CSS)
export function HorizontalScrollGalleryDemo() {}