CSSscroll-snap cho phép cuộn dừng đúng vào từng mốc, không cần thư viện JS.
css
.carousel {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory; /* trục x, buộc dừng đúng điểm */
scroll-padding-inline: 16px; /* chừa chỗ cho phần header dính, nếu có */
}
.carousel > .slide {
flex: 0 0 100%;
scroll-snap-align: start; /* mốc dừng: start | center | end */
scroll-snap-stop: always; /* không cho lướt vượt nhiều slide một lần */
}| Giá trị | Hành vi |
|---|---|
mandatory | luôn dừng đúng mốc — hợp carousel toàn màn hình |
proximity | chỉ dính khi dừng gần mốc — hợp danh sách dài, tự nhiên hơn |
Dùng cho: carousel ảnh, danh sách card cuộn ngang, trang cuộn theo từng section, lịch theo tuần.
Lưu ý 1: mandatory với nội dung cao/dài hơn container làm người dùng không cuộn tới được phần giữa — nội dung bị nhảy qua. Trường hợp đó dùng proximity.
Lưu ý 2: quên scroll-padding khi có header position: sticky — mốc dừng nằm khuất sau header.
Chốt: đây là ví dụ rõ nhất của xu hướng chuyển việc từ JS sang CSS — carousel cơ bản giờ không cần Swiper hay thư viện nào.