CSS Scroll Snapping - 2/9 exciting CSS features

Avatar Tim Wuyts

By Tim Wuyts

Header image
CSS has been brought to you to revolutionize the visualization of a (responsive) website. However, developers and designers have complained about some particular CSS shortcomings that made commonplace tasks quite the ordeal. Fortunately, the world of CSS is ever-evolving and a lot of new features are being added lately to do away with some of these pesky flaws. In this blogpost We’ll discuss CSS Scroll Snapping - 2 out of 9 exciting new additions that’ll simplify the styling of web pages. Read on to learn more and start using it creatively today!

CSS Scroll Snapping

You’re navigating down a web page and all of a sudden, scrolling comes to an abrupt halt on a random part of the page, like an image or smack bang in the middle of a paragraph. This is because scrolling inherently lacks precision, something developers have been trying to resolve with JavaScript for ages.

That didn’t always lead to the best results, though, and JavaScript libraries for carousels, animations and horizontal & vertical scroll interactions are CPU-consuming. With the scroll-snap-type CSS property, you’ll give JavaScript the chop! This new module locks the user’s viewport to the part of your website or component you want after the user has finished scrolling. The best part? The effect is completely controlled within CSS.

Curious to find out more tips?

Read Tim's blogpost about 9 exciting CSS features you can start using today!