DEV Community

loading...

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

bernardxf profile image Bernard Faria ・1 min read

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

Discussion (2)

pic
Editor guide
Collapse
inhuofficial profile image
InHuOfficial

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