Scroll Shelf
A horizontally scrollable content shelf with scroll-snap for clean stopping points.
Published June 16, 2026
Demo
Design Systems
12 articles
CSS Tricks
8 articles
Typography
15 articles
Animation
9 articles
Layout
20 articles
Performance
6 articles
Accessibility
11 articles
← scroll or swipe →
HTML
<div class="shelf">
<div class="shelf-item">Card 1</div>
<div class="shelf-item">Card 2</div>
<div class="shelf-item">Card 3</div>
</div>CSS
.shelf {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
gap: .75rem;
-webkit-overflow-scrolling: touch;
}
.shelf-item {
flex: 0 0 160px;
scroll-snap-align: start;
}How it works
overflow-x: auto on the container enables horizontal scrolling. display: flex makes child items sit in a row. scroll-snap-type: x mandatory on the container and scroll-snap-align: start on each item ensures the scroll stops cleanly at item boundaries. -webkit-overflow-scrolling: touch enables smooth momentum scrolling on iOS.