scroll-snap CSS là gì?

CSS scroll-snap tạo hiệu ứng scroll "bắt dính" vào vị trí cố định mà không cần JavaScript. Container khai báo scroll-snap-type: x mandatory (hoặc y); mỗi item con khai báo scroll-snap-align: start (hoặc center, end).

mandatory: scroll buộc dừng chính xác tại điểm snap. proximity: chỉ snap khi dừng đủ gần.

Dùng cho carousels, image galleries, full-page scroll sections mà không cần thư viện JS.

CSS scroll-snap lets you create a 'snapping' scroll effect that locks to fixed positions without JavaScript.

• The container declares scroll-snap-type: x mandatory (or y for vertical scroll), and each child item declares scroll-snap-align: start (or center, end) to specify the snap point.
• The mandatory value forces the scroll to stop exactly at a snap point, while proximity only snaps when the scroll stops close enough.
• Useful for carousels, image galleries, and full-page scroll sections without external JS libraries.