CSS Scroll Snap

14-04-2020

Ever wondered if you could make a CSS-only carousel or image gallery, without the use of awkward hacks? Well it's 2020 and you can!

The new(ish) CSS scroll-snap-type lets you do just that.

If you want to play around with CSS Scroll snap, you can do so using the example above, on CodePen:

See the Pen CSS Scroll Snap by Tristan White (@triss90) on CodePen.

Browser Support

CSS scroll snap has wide support, with the exception of Internet Explorer and a few mobile browsers

CSS technique that allows customizable scrolling experiences like pagination of carousels by setting defined snap positions.

To learn more about CSS Scroll Snap, please refer to the docs on https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type