DEV Community

Bernard Faria
Bernard Faria

Posted on

Do you know the scroll-snap-type CSS property ??

The CSS scroll-snap-type property allows you to lock the viewport on certain elements or locations after the user has finished scrolling. I venture to say that this will be the future (or already is the present) of the slides.

For example: A user browsing a photo gallery probably doesn't want to scroll halfway through an image - they probably prefer the image to "snap" to the right position while scrolling.

I will leave a Codepen Link for better viewing.

References:

CSS-TRICKS
Mozilla
Caniuse

Top comments (2)

Collapse
 
grahamthedev profile image
GrahamTheDev

You might want to give people a quick head's up that our example doesn't work with scroll, it only works with swipe - took me 10 (ok 30) seconds to work out it doesn't work unless you are using a touch device! 🤣🤣

Collapse
 
elianbecali profile image
Elian Becali

Very good this css property