scroll-snap-type and scroll-snap-align
Create carousel and paging scroll experiences with CSS scroll snap properties.
What is CSS Scroll Snap?
CSS Scroll Snap allows scrollable containers to "snap" to specific positions after scrolling, creating controlled paging and carousel behaviors without JavaScript.
scroll-snap-type on Container
Enable snap on the scrollable container:
.carousel {
overflow-x: scroll;
scroll-snap-type: x mandatory;
/* x = horizontal snapping, mandatory = must snap */
}All lessons in this course
- overflow: hidden scroll auto clip
- scroll-behavior: smooth
- scroll-snap-type and scroll-snap-align
- Scrollbar Styling with ::-webkit-scrollbar