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.