Did you know you can build fully-fonctional horizontal carousels in your websites or PWAs exclusively with CSS thanks to the scroll-snap property? No JavaScript required.
Mandatory ensures the scroll container will always come to rest on a snap point. It forces the browser to align to an item even if the user barely swipes. Proximity acts like a magnet—it will only snap if the user's scroll comes to rest reasonably close to a snap point. Proximity is generally considered safer for accessibility and varied screen sizes.
If your carousel container has padding (e.g., 20px on the left side) and you set your alignment to start, the browser will snap the item directly to the 0px edge, completely ignoring your visual padding. Adding scroll-padding: 20px tells the scroll-snap engine to offset the snap point, preserving your layout spacing.
Scrollbars are notoriously fragmented across browser engines. To properly hide them while keeping the scroll functionality intact, you must use scrollbar-width: none; for Firefox, -ms-overflow-style: none; for legacy IE/Edge, and the pseudo-selector ::-webkit-scrollbar { display: none; } for Chrome, Safari, and modern Edge. This generator automatically includes all of these.
No! CSS scroll-snap pushes the swiping, momentum, and snapping math entirely to the browser's compositor thread. This makes it incredibly fast and hardware-accelerated. You only need JavaScript if you want to add manual "Next/Previous" arrow buttons to programmatically scroll the container.
With Progressier, you get push notifications, installation and more... without the dev work.
Generate PWA See plans
