Scroll Snap Container
Smooth scroll snap effect for horizontal/vertical scrolling
Code
.scroll-snap-container {
width: 100%;
max-width: 600px;
height: 300px;
overflow-x: scroll;
scroll-snap-type: x mandatory;
display: flex;
gap: 0;
-webkit-overflow-scrolling: touch;
}
.scroll-snap-item {
flex: 0 0 100%;
height: 100%;
scroll-snap-align: start;
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
font-weight: bold;
color: white;
}
.scroll-snap-item:nth-child(1) { background: #ff6b6b; }
.scroll-snap-item:nth-child(2) { background: #4ecdc4; }
.scroll-snap-item:nth-child(3) { background: #ffe66d; }HTML
<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="scroll-snap-container"</span>>
<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="scroll-snap-item"</span>>Slide 1</"attr-name"</span>>class</span>="tag"</span>>div</span>>
<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="scroll-snap-item"</span>>Slide 2</"attr-name"</span>>class</span>="tag"</span>>div</span>>
<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="scroll-snap-item"</span>>Slide 3</"attr-name"</span>>class</span>="tag"</span>>div</span>>
</"attr-name"</span>>class</span>="tag"</span>>div</span>>